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，则我的菜单被隐藏，ad我出现了一个按钮，当点击按钮时，会出现菜单。

如果我的窗口大于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

$( 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函数，因此可以向按钮添加许多click事件侦听器。一旦你点击它就可以运行所有这些。

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

Answer 3

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

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

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

3 个答案: