窗口＆lt; = 768px时的jQuery下拉菜单

Question

当屏幕宽度等于或小于768px时，我有两个必须消失的菜单。当点击某些按钮时，它们必须显示为下拉列表。 这是我的问题 - 有时当我调整浏览器的大小＆lt; = 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()处理程序。文档here

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

});
});