window <= 768px時的jQuery下拉菜單

Question

我有兩個菜單，當屏幕寬度等於或小於768px時必須消失。 單擊某些按鈕時，它們必須像下拉菜單一樣顯示。 這是我的問題-有時當我將<= 768px的瀏覽器調整大小超過2倍時，這些功能可能會停止工作，但是如果我繼續調整瀏覽器按鈕的大小，則有機會再次使用。 這是我的代碼：

  $(document).ready(function(){ $(window).resize(function() { if ($(window).width() <= 768) { $('.categories-heading').click(function(){ $('#menu-categories').toggle(); }); $('.navbar-toggle').click(function(){ $('#bs-example-navbar-collapse-1').toggle(); }); } else if($(window).width() > 768) { $('#menu-categories').css('display','block'); $('#bs-example-navbar-collapse-1').css('display','block'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

在這種情況下，請嘗試使用.on()處理函數。 這里的文件

 $(document).ready(function(){
 $(window).on("resize", function() {

  if ($(window).width() <= 768) {
    $('.categories-heading').click(function(){
        $('#menu-categories').toggle();
    });
    $('.navbar-toggle').click(function(){
      $('#bs-example-navbar-collapse-1').toggle();
    });
  }
  else if($(window).width() > 768) { 
    $('#menu-categories').css('display','block');
    $('#bs-example-navbar-collapse-1').css('display','block');
  }

});
});