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

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...
});

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