根据窗口宽度和窗口调整大小启用功能

Question

我有一个功能，我想根据我的窗口宽度启用，为移动和 ipad 窗口定制我的菜单......它工作正常，但是当我调整窗口大小时，该功能不会再次触发。 让我解释一下，这是我的功能代码：

if ($(window).width() < 960) {
    $('.button_menu').css("display", "block");
   $('#bloc_menu').hide();
    $('.button_menu').click(function() {     
          $(this).next().slideToggle();
          return false;
    });

}

else {

    $('#bloc_menu').css("display", "block");
    $('.button_menu').css("display", "none");
}

如果窗口宽度小于960，那么我的菜单是隐藏的，广告我有一个按钮出现，当点击按钮时，菜单出现。

如果我的窗口大于 960，则隐藏按钮，并显示我的菜单。

我也有一些 css 规则：

#menu{list-style: none;}
.button_menu{display: none}

@media (max-width: 960px) {
#bloc_menu{margin-top: 10px;position: relative;border-top: 1px solid lightgrey;}

我只想添加一个窗口调整大小监听器，但我找不到解决方案，有人可以帮我吗？

非常感谢您的帮助，

Answer 1

你需要使用jquery的resize函数：

$( window ).resize(function() {


your code...
});

这将在每次调整窗口大小时触发您的代码。

Answer 2

为避免在您打开它后隐藏它，请使用一个标志并在您单击按钮时切换它：

  var flag = 0;

  $('.button_menu').click(function() {     
          $(this).next().slideToggle();
          if(flag==0){ 
          flag=1;
          } else {
          flag=0;
          }
          return false;
    });

  $( window ).resize(function() {
    if ($(window).width() < 960) {
    $('.button_menu').css("display", "block");
    if(flag==0){
    $('#bloc_menu').hide();
    }
  }else{
    $('#bloc_menu').css("display", "block");
    $('.button_menu').css("display", "none");
  }
});

Answer 3

$( window ).resize(function() {

    if($(window).width() < 960) {
        $('.button_menu').css("display", "block");
        $('#bloc_menu').hide();
        $('.button_menu').off().click(function() {     
              $(this).next().slideToggle();
              return false;
        });
    }else{
        $('#bloc_menu').css("display", "block");
        $('.button_menu').css("display", "none");
    }
});

resize 函数可以被多次调用，因此它可以为您的按钮添加许多点击事件侦听器。一旦你点击它就会运行所有这些。

在添加事件侦听器之前放置off() 函数。