함수 비교 너비 요소

sidebar 요소의 너비를 검색하여 절대 값 250px과 비교하여 내 메뉴를 조정하려고 시도하지만 계속 진행할 방법이 확실하지 않습니다.함수 비교 너비 요소

내 메뉴가 열려 있거나 메뉴가 닫혀있을 때 항목을 삭제할 때를 알아야합니다. 처음에 작은 정보를 제공해 주어서 죄송합니다.

전체 코드 JS

$(document).ready(function() { 

    function toggleSidebar() { 
    $(".button").toggleClass("active"); 
    $(".sidebar").toggleClass("widthSidebarJs"); 
    $(".sidebar-item").toggleClass("active"); 
    } 

    $(".button").on("click tap", function() { 
    toggleSidebar(); 
    }); 

    var maxSizeSidebar = 250; 
    var widthSidebar = $(".sidebar").innerwidth(); 

    function displayForXsSidebar(){ 
    if (widthSidebar < maxSizeSidebar){ 
     $(".displayForXs").toggleClass("displayXs"); 
    } 
} 

    $(document).keyup(function(e) { 
    if (e.keyCode === 27) { 
     toggleSidebar(); 
    } 
    }); 

});

출처

2017-10-25 Krash

흥미 롭습니다. 궁금한 점이 무엇입니까? – Teemu

um : innerwidth <--- typo, 어디에서 displayForXsSidebar를 호출합니까? – epascarello

'displayForXsSidebar' 함수를 호출하여이 'displayForXsSidebar()'를 사용하여 너비를 비교하십시오. –

는 현재 코드에서 함수 displayForXsSidebar()이 실행됩니다 없습니다. 하지만 쉽게, 내가 추측 할 수, 당신은 추가 /에 - 클래스 displayXs를 제거해야

$(document).ready(function() { // when document ready, we calculate the width, is better. 
    var maxSizeSidebar = 250; 
    var widthSidebar = $(".sidebar").outerWidth(); 

    alert('you widthSidebar value right now is ' + widthSidebar); 

    if (widthSidebar < maxSizeSidebar){ 
     $(".displayForXs").addClass("displayXs"); 
    } else { 
     $(".displayForXs").removeClass("displayXs"); 
    } 
});

라이브 데모 ..

$(document).ready(function() { 
 
    var maxSizeSidebar = 250; 
 
    var widthSidebar = $(".sidebar").outerWidth(); 
 

 
    if (widthSidebar < maxSizeSidebar){ 
 
     $(".displayForXs").addClass("displayXs"); 
 
     alert('you widthSidebar value right now is ' + widthSidebar + ' so we add class displayXs'); 
 
    } else { 
 
     $(".displayForXs").removeClass("displayXs"); 
 
     alert('you widthSidebar value right now is ' + widthSidebar + ' so we remove class displayXs'); 
 
    } 
 

 
});

.sidebar { 
 
width: 240px; /* Change width here to 260px if you want */ 
 
} 
 
.displayXs { background: #000; color: #fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div class="sidebar"> 
 
MY SIDEBAR</div> 
 

 
<div class="displayForXs"> 
 
My displayForXs element 
 
</div>

출처

2017-10-25 18:11:26 fulltimecoder

.. 기능을 제거, 이것을 시도 크기를 조정하십시오. resize() 이벤트 리스너를 추가 할 수 있습니다.

이런 식으로 뭔가 :

$(window).on('resize', function(){ 
    if (widthSidebar < maxSizeSidebar){ 
    $(".displayForXs").addClass("displayXs"); 
    } else { 
    $(".displayForXs").removeClass("displayXs"); 
    } 
})

그러나 더 나은 방법은 css에 @media -queries입니다.

출처

2017-10-25 18:12:56

감사합니다.하지만 창이 줄어들 때가 아닙니다. 내 메뉴가 열리고 닫힐 때입니다. – Krash

함수 비교 너비 요소

답변

관련 문제