Question

这是一个简单的隐藏/显示菜单：将鼠标悬停在列表项上时，脚本会显示作为该列表项的子项的所有无序列表，然后显示。 CSS将此子列表置于列表项的直接右侧。当你使用mouseout时，它会再次隐藏那个无序列表。

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

Answer 2

我认为它会在显示子菜单之前捕获mouseout事件。尝试将显示/隐藏速度更改为快速。但这不是解决方案。

Answer 3

此代码还可以避免多次弹跳

 var myVar;
 $(".liveUser").on({
        mouseenter: function () {
        myVar = setTimeout(function(){ //optional delay
             //$(".userDetail").stop().hide().fadeIn();
               $(".userDetail").stop().hide().show();
                 }, 400);
        },
        mouseleave: function () {
            clearTimeout(myVar);
            //$(".userDetail").stop().fadeOut();
            $(".userDetail").stop().hide();
       }
   });

jQuery hover（）隐藏/显示导致弹跳

3 个答案: