サイズ変更ウィンドウは常にクリックイベントをトリガーする

Question

狭いアイコンバーに切り替えることができるブートストラップサイドバーがあり、画面の高さが768より大きい場合はサイドバーを表示する必要があり、高さが低い場合はサイドバーを表示する必要がありますしかし、私のスクリプトは768未満のクリックイベントを発生させるように見えます。したがって、画面のサイズを複数回変更し、高さが768未満になると、サイドバーを複数回連続して切り替えます。高さが768を超えると、トグルが停止します。

私のコードは次のとおりです。

$("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
     $("span", this).toggleClass("fa fa-lock fa fa-unlock"); 
    }); 
$("#menu-toggle-2").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled-2"); 
     $("span", this).toggleClass("fa fa-lock fa fa-unlock"); 
    }); 

$(document).ready(function() { 
    var $window = $(window); 

     // Function to handle changes to style classes based on window width 
     function checkWidth() { 
      if ($window.height() <= 768) { 
       $("#wrapper").toggleClass("toggled-2"); 

      } 
      else if ($window.height() > 768) { 
       $("#wrapper").toggleClass("toggled"); 
      } 
     } 

    // Execute on load 
    checkWidth(); 
    // Bind event listener 
     $(window).resize(checkWidth); 
}); 

任意の助けを事前に感謝し、感謝しています。

Answer 1

クリックイベントが発生していますか？ （console.logを使用して確認するには、クリック機能内のログを作成してください）

投稿したコードに基づいて、resizeはウィンドウのサイズを変更すると複数回発生する可能性があります。

は以下を使用してみてください：

$(window).resize($.throttle(checkWidth, 300)); 

スロットルは一回300ミリ秒（またはものは何でもあなたが設定することを決定した遅延）を超えないを実行していない新しい機能を返す

注：これは、jQueryのデバウンス/スロットルを使用していますプラグイン

https://code.google.com/archive/p/jquery-debounce/