Question

我有这个脚本，当窗口大于800px时，应该允许slideUp / slideDown用于嵌套ul（下拉菜单），如果窗口宽度小于800px，则禁用slideUp / slideDown功能，只显示所有导航内容为无序列表。

在“加载”事件中，一切都按预期工作。

不幸的是，在800px下调整窗口大小后，我无法让slideUp / slideDown动画停止在'resize'事件上执行。

有解决方案吗？感谢

$(window).on('load resize', function(event){
      var win = $(this); //this = window
      if (win.width() >= 800) {

        $( "nav" ).addClass( "wide-nav" );

        $('nav.wide-nav li').hover(
          function () {
            $('ul', this).stop().slideDown(200);
          },
          function () {
            $('ul', this).stop().slideUp(200);
          }
        );
    } else  { 
        $( "nav" ).removeClass( "wide-nav" );
    }
});

Answer 1

当窗口大于或等于800时，您绑定hover事件，但是当小于800时，您没有解除绑定，因此在获取resize事件时尝试取消绑定事件：

$(window).on('load resize', function(event){
      var win = $(this); //this = window
      if (win.width() >= 800) {

        $( "nav" ).addClass( "wide-nav" );

        $('nav.wide-nav li').hover(
          function () {
            $('ul', this).stop().slideDown(200);
          },
          function () {
            $('ul', this).stop().slideUp(200);
          }
        );
    } else  { 
        $( "nav" ).removeClass( "wide-nav" );
        $('nav.wide-nav li').off('hover')
    }
});

Answer 2

尝试使用jQuery的.off()函数。在我的简单示例中，一旦窗口宽度小于400像素，它就会从resize元素中删除window事件处理程序。

编辑：在整页中打开代码段以便能够调整其大小。

function resizeEventHandler(event) {
  console.log("Resized");
  var win = $(this);
  console.log(win.width());
  if (win.width() < 400) {
    win.off("resize", "", resizeEventHandler);
  }   
}

$(window).on('load resize', resizeEventHandler);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

根据条件阻止jQuery脚本运行

2 个答案: