代码之家 › 专栏 › 技术社区 › mmdwc

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

window-resize listener width css jquery

0

mmdwc · 技术社区 · 12 年前

我有一个功能,我想根据我的窗口宽度启用,为移动和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;}

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

非常感谢你的帮助,

3 回复 | 直到 12 年前

1

RMSTOKES 12 年前

您需要使用jquery的resize函数:

$( window ).resize(function() {


your code...
});

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

2

0

RMSTOKES 12 年前

要避免在打开后隐藏,请使用标志并在单击按钮时切换:

  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

0

Im0rtality 12 年前

$( 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() 函数,然后添加事件侦听器。