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

Question

我想做什么:

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

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

• 如果窗口大于或等于 960px 宽，我的导航栏是水平的。我希望子菜单显示为页面上其他内容上方的下拉菜单。

• 如果窗口宽度小于 960 像素，我的导航栏是垂直的。我希望子菜单显示为 Accordion ，将其他导航链接向下推。

我还希望我的脚本在页面加载完成和调整窗口大小时执行。

我的脚本:

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()

的函数

有什么想法吗？谢谢!

Answer 1

如您所述，问题是您一直在收听 hover每次调整大小的事件。解决这个问题的一个简单方法是每次都解除绑定(bind)相应的 DOM 事件，方法是:

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

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

演示(点击“Expand Snippet”进行全屏测试):

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>