関数width要素を比較しました

Question

要素の幅を取得して、その値を絶対値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(); 
    } 
    }); 

}); 

Answer 1

はあなたの現在のコードでは、あなたの関数displayForXsSidebar()が実行されるわけではありません。しかし、簡単に、私が推測するように、あなたが-classに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>

Answer 2

$(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"); 
    } 
}); 

..機能を削除し、これを試してくださいサイズを変更します。 resize()イベントリスナーを追加できます。

このような何か：

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

しかし、より良い方法は、あなたのcssで@media -queriesです。