javascript - 在父链接悬停时显示子菜单，然后保持它可见直到鼠标离开子菜单？

Question

我有一个这样排列的菜单:

<ul class="parent-menu">
  <li class="menu-item">
    <a class="menu-item-link" href="#">Link</a>
    <ul class="sub-menu">
      <!-- sub menu list items -->
    </ul>
  </li>
  <!-- more parent menu list items -->
</ul>

.sub-menu 元素默认隐藏。

我正在使用以下 jQuery 来完美地显示/隐藏子菜单:

$('.menu-item > a').hover(function() {
  $(this).find('.sub-menu').toggle();
})

当然，一旦鼠标离开 .menu-item > a 元素，它们就会消失。我想不出一种方法来“切换” .toggle() 事件的后半部分，使其基本上作为整个 上的 .mouseleave() >.sub-menu 元素。

因此，当用户将鼠标悬停在父菜单项上时，他们会看到一个子菜单，他们应该能够随意悬停并选择子菜单项。

我该怎么做？

Answer 1

真的想通了。我通过使用 .hover() 使事情变得过于复杂，发现我可以简单地分别使用 mouseenter() 和 mouseleave()，但是使用后者位于 主菜单项及其子菜单的父元素上。因此，当您的鼠标进入父菜单项链接时，它会显示其子菜单(我有多个，所以我不得不使用 $(this) 和 find() 或 siblings() 而不是对其进行硬编码)。当鼠标离开两者的父级时(主链接或子菜单本身)，它就会隐藏起来，这是应该的。

代码如下:

$('.menu-item > a').mouseenter(function() {
  $(this).siblings('.sub-menu').show();

});

$('.menu-item').mouseleave(function() {
  $(this).find('.sub-menu').hide();
});