jQuery hover() 隐藏/显示导致反弹

Question

这是一个简单的隐藏/显示菜单:当您将鼠标悬停在列表项上时，该脚本会显示作为该列表项子项的所有无序列表，然后显示。 CSS 将此子列表放在悬停的列表项的右侧。当您鼠标移出时，它会再次隐藏该无序列表。

HTML:

<div class="menu-header-category-menu-container">
  <ul id="menu-header-category-menu" class="menu">
    <li id="menu-item-58"><a href="?cat=3">Parent Category I</a>
      <ul class="sub-menu">
        <li id="menu-item-59"><a href="?cat=6">Child Category I</a></li>
        <li id="menu-item-60">
          <a href="?cat=7">Child Category II</a>
          <ul class="sub-menu">
            <li id="menu-item-61"><a href="?cat=9">Grandchild Category I</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li id="menu-item-62"><a href="?cat=4">Parent Category II</a></li>
    <li id="menu-item-63">
      <a href="?cat=5">Parent Category III</a>
      <ul class="sub-menu">
        <li id="menu-item-64"><a href="?cat=8">Child Category III</a></li>
      </ul>
    </li>
    <li id="menu-item-57"><a href="?cat=1">Uncategorized</a></li>
  </ul>
</div>

CSS:

li {
    width: 150px;
    border: 1px solid black;
    background-color: aqua;
    list-style-type: none;
    position: relative;
}

ul.sub-menu {
    position: absolute;
    left: 110px;
    top: 0px;
    display: none;
}

JavaScript:

$(document).ready(function() {
    $('li').hover(
        function() { $(this).children('ul').show('slow'); },
        function() { $(this).children('ul').hide('slow'); }
    );
});

它的工作原理基本符合预期。除非您将鼠标从列表项上移开并将其留在子列表应该出现的空间(在子列表完成显示之前)，否则您会使其陷入显示/隐藏/显示/隐藏重复循环，直到您移动鼠标光标离开。

我尝试在 mouseover 参数的函数和 mouseout 参数的函数中使用 setTimeout() 来解决这个问题。我还尝试使用条件来检查子列表是否隐藏在这些参数中。我没有看到任何性能差异。

任何人

Answer 1

这是一个常见问题，请查看 Hover Intent