jQuery .hover()和$(window).resize()的奇怪行为

2023年8月3日 109次阅读

我想做的事：

我的网站上有一个导航栏.某些导航链接具有与其关联的子菜单.我希望能够将鼠标悬停在具有子菜单的导航链接上,并显示子菜单.

但是,我希望子菜单根据窗口大小显示不同：

>如果窗口大于或等于960px宽,我的导航栏是水平的.我希望子菜单显示为页面上其他内容上方的下拉菜单.
>如果窗口宽度小于960px,我的导航栏是垂直的.我希望子菜单显示为手风琴,将其他导航链接向下推.

我还希望我的脚本在页面加载完成后以及调整窗口大小时执行.

我的剧本：

function navMenu() {
  if ($(window).width() >= 960) {
    $('.menu-item-has-children').hover(function() {
      $(this).children(".sub-menu").css('display', 'block');
    }, function() {
      $(this).children(".sub-menu").css('display', 'none');
    });
  } else {
    $('.menu-item-has-children').hover(function() {
        $(this).children(".sub-menu").slideToggle(500);
      }, function() {
        $(this).children(".sub-menu").slideUp(500);
    });
  }
}
$(document).ready(function() {
   navMenu();
});
$(window).resize(function() {
   navMenu();
});

怎么了：

当$(document).ready()触发时,上面的脚本工作正常.

问题在于：如果我在加载后调整窗口大小,脚本会创建多个mouseover和mouseout事件侦听器.将鼠标悬停在导航链接上会导致子菜单反复上下弹跳.

你可以在这里看到我的意思：https://codepen.io/ben393/pen/qLrMmX.

我试过的一些事情(到目前为止还没有工作)：

>使.hover()函数为($(window).width()> = 960)
>使$(document).ready()函数$(window).resize()

有任何想法吗？谢谢！

最佳答案 正如您所提到的,问题是您在每次调整大小时都会继续收听
hover个事件.解决此问题的一种简单方法是每次取消绑定相应的DOM事件,其中包括：

$('.menu-item-has-children').off('mouseenter mouseleave');

请注意,hover()会在后台绑定这两个事件.另请注意,这将删除这些事件的所有自定义处理程序.您还可以将处理程序函数存储到变量中,如果您想要更具体,则只解除它们的绑定.

演示(单击“展开代码段”以全屏测试)：

function navMenu() {
  $('.menu-item-has-children').off('mouseenter mouseleave');
  if ($(window).width() >= 960) {
    $('.menu-item-has-children').hover(function() {
      $(this).children(".sub-menu").css('display', 'block');
    }, function() {
      $(this).children(".sub-menu").css('display', 'none');
    });
  } else {
    $('.menu-item-has-children').hover(function() {
      $(this).children(".sub-menu").slideToggle(500);
    }, function() {
      $(this).children(".sub-menu").slideUp(500);
    });
  }
}
$(document).ready(function() {
  navMenu();
});
$(window).resize(function() {
  navMenu();
});
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

ul li {
  display: inline-block;
  padding: 10px;
  background-color: grey;
}

ul.sub-menu {
  display: none;
  font-weight: normal;
  position: absolute;
}

ul.sub-menu li {
  display: block;
}

@media only screen and (max-width: 959px) {
  ul li {
    display: block;
    width: 100px;
  }
  ul.sub-menu {
    position: relative;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main_header_menu">
  <li class="menu-item-has-children">Main item 1
    <ul class="sub-menu">
      <li>sub item 1</li>
      <li>sub item 2</li>
      <li>sub item 3</li>
    </ul>
  </li>
  <li>Main item 2</li>
  <li class="menu-item-has-children">Main item 3
    <ul class="sub-menu">
      <li>sub item 1</li>
      <li>sub item 2</li>
      <li>sub item 3</li>
    </ul>
  </li>
</ul>
点赞