窗口<=768px时的jQuery下拉菜单答案

【问题标题】：jQuery dropdown menus when window<=768px窗口<=768px时的jQuery下拉菜单
【发布时间】：2017-01-21 05:51:47
【问题描述】：

当屏幕宽度等于或小于 768 像素时，我有两个菜单必须消失。当点击某些按钮时，它们必须像下拉菜单一样显示。这是我的问题 - 有时当我调整浏览器的大小

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

尝试 .on() 处理程序
每次将大小调整为<= 768 时，您都在重新添加.click 绑定，因此您是多重绑定并得到奇怪的结果。我会修改它以将检查放入 .click 事件中，或者使用引导程序仅在 -sm 类上显示这些按钮。
记得在文档就绪时调用您的 $(window).width() 规则，因为没有调整大小事件，规则将不会适用（因此，当 some1 从移动设备）

标签： javascript jquery html css

【解决方案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');
  }

});
});

【讨论】：