jQuery hover() 隐藏/显示导致弹跳答案

【问题标题】：jQuery hover() hide/show causing bouncejQuery hover() 隐藏/显示导致弹跳
【发布时间】：2012-01-21 11:30:01
【问题描述】：

这是一个简单的隐藏/显示菜单：当您将鼠标悬停在列表项上时，脚本会显示作为该列表项子项的所有无序列表，然后显示。 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() 来解决这个问题。我还尝试使用条件来检查子列表是否隐藏在这些参数中。我没有看到任何性能差异。

任何人

【问题讨论】：

尝试将鼠标悬停处理程序绑定到锚点而不是列表项。我有一种感觉，它会马上清除。
我可以看到其中的逻辑（因为 li 包含子菜单）但是，当您将鼠标移离锚点时，这不会导致子菜单消失（如果您需要，您会这样做单击子菜单中的某些内容）
德普。在我跳跃之前看了看，所以这确实不是解决方案，但我有一种感觉，不知何故是问题的根源。似乎列表项上的鼠标悬停应该隐藏当前级别上的任何可见子菜单，然后显示自己的，在顶级 ul 上使用鼠标悬停来隐藏任何可见子菜单。
您是否尝试在 show 和 hide 调用之前添加 stop() 函数？它可能会简化脚本中的事件处理。

标签： jquery html css

【解决方案1】：

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

【讨论】：

这很有趣。我使用了 Hover Intent，意外触发错误更难，但如果我打算这样做，我可以让它发生。我想知道这是否是我必须忍受的。
我工作了一点，使用超时参数几乎不可能复制。我很确定我不会再被这件事困扰了。干杯！

【解决方案2】：

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

【讨论】：

是的，不幸的是外观问题。

【解决方案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();
       }
   });

【讨论】：