javascript - 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() 处理程序。文档 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');
  }

});
});