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

我有一个功能，我想根据我的窗口宽度启用，以自定义我的移动和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");
}

我只想添加一个窗口调整侦听器，但我找不到解决方案，有人能帮我吗

---

非常感谢您的帮助，

您需要使用jquery的调整大小功能：

$( window ).resize(function() {


your code...
});

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

$（窗口）。调整大小（函数（）{

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

如果（$（窗口）.width（）<960）{ $（'.button_menu'）.css（“显示”、“块”）； $（“#bloc_菜单”）.hide（）； $（'.button_菜单'）。关闭（）。单击（函数（）{ $（this.next（）.slideToggle（）； 返回false； }); }否则{ $（'bloc#u menu'）.css（“显示”、“块”）； $（'.button_menu'）.css（“显示”、“无”）； } }); resize函数可以多次调用，因此它可以向按钮添加多个单击事件侦听器。单击后，它将运行所有这些

---

在添加事件侦听器之前，请将

关闭（）

函数放置在右侧。

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

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

var标志=0；
$（'.button_菜单'）。单击（函数（）{
$（this.next（）.slideToggle（）；
如果（标志==0）{
flag=1；
}否则{
flag=0；
}
返回false；
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<960）{
$（'.button_menu'）.css（“显示”、“块”）；
如果（标志==0）{
$（“#bloc_菜单”）.hide（）；
}
}否则{
$（'bloc#u menu'）.css（“显示”、“块”）；
$（'.button_menu'）.css（“显示”、“无”）；
}
});

$（窗口）。调整大小（函数（）{…}）

？谢谢@RMSTOKES，好的，我找到了解决方案，但是当添加调整大小（函数）时，当单击我的按钮时，我的菜单在正确显示之前显示和隐藏了3到4次。。。你知道为什么吗？谢谢@ordepim，它工作得很好，还有一个问题，在调整大小时是否可以保持“bloc”菜单的打开状态？我的意思是当我的窗口小于960时，我点击.button_菜单，mt#bloc_菜单出现，但如果我调整大小，它就会消失。。。你明白我的意思吗？谢谢。。。请尝试以下操作：$（窗口）.调整大小（函数（）{if（$（窗口）.宽度（）<960）{$（'.button_菜单'）.css（“显示”，“块”）；if（！$（'.bloc_菜单”）.hasClass（“onMobile”））$（'.bloc_菜单'）。隐藏（）；$（'.button_菜单'）。关闭（）.单击（函数（）{$（this）.下一步（）.slideToggle（）.addClass（“onMobile”）；return false；}）；}else{$（'bloc_menu'）.css（“display”，“block”）.removeClass（“onMobile”）；$（'button_menu'）.css（“display”，“none”）；}）；谢谢你的回复，但我尝试了你的代码，它不工作。。。这里是AJSFIDLE以查看其运行情况，按钮图像未显示，因为我正在本地工作：再次感谢您的帮助谢谢，我在$（'.button_菜单'）中添加了'.off'。off（）。单击（函数（），它工作得非常完美，非常感谢，欢迎您，我建议您将单击功能移出调整大小功能-它不应该真的在那里。我还更新了上面的代码。

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