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

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

HTML：

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（）来修复此问题。我还尝试使用条件检查子列表是否隐藏在这些参数中。我没有看到任何性能差异

---

任何人

我想它会在显示子菜单之前捕获您的鼠标移出事件。尝试将“显示/隐藏速度”更改为“快速”。但这不是一个解决方案

我想它会在显示子菜单之前捕获您的鼠标移出事件。尝试将“显示/隐藏速度”更改为“快速”。但这不是一个解决方案

这是一个常见问题，请检查

这是一个常见问题，请检查

此代码还将避免多次跳转

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

---

此代码还将避免多次反弹

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

---

尝试将鼠标悬停处理程序绑定到锚点，而不是列表项。我有一种感觉，它会马上消失。我可以看到其中的逻辑（因为li包含子菜单），但是，当您将鼠标从锚上移开（如果您需要单击子菜单中的某个内容，您会这样做）Derp时，这不会导致子菜单消失。在我跳之前看了一下，所以这确实不是解决办法，但我有一种感觉，不知怎么的，这就是问题的根源。列表项上的鼠标悬停似乎应该隐藏当前级别上的任何可见子菜单，然后显示自己的子菜单，顶级ul上的鼠标悬停可以隐藏任何可见子菜单。在显示和隐藏调用之前是否尝试添加stop（）函数？这可能会简化脚本中的事件处理。请尝试将鼠标悬停处理程序绑定到锚点，而不是列表项。我有一种感觉，它会马上消失。我可以看到其中的逻辑（因为li包含子菜单），但是，当您将鼠标从锚上移开（如果您需要单击子菜单中的某个内容，您会这样做）Derp时，这不会导致子菜单消失。在我跳之前看了一下，所以这确实不是解决办法，但我有一种感觉，不知怎么的，这就是问题的根源。列表项上的鼠标悬停似乎应该隐藏当前级别上的任何可见子菜单，然后显示自己的子菜单，顶级ul上的鼠标悬停可以隐藏任何可见子菜单。在显示和隐藏调用之前是否尝试添加stop（）函数？这可能会简化脚本中的事件处理。是的，不幸的是外观问题。是的，不幸的是外观问题。这很有趣。我使用了Hover Intent，很难意外触发bug，但是如果我打算这么做，我可以让它发生。我不知道这是否是我不得不忍受的事情。我工作了多一点，使用timeout参数几乎不可能复制。我很确定我不会再被这件事困扰了。干杯很有趣。我使用了Hover Intent，很难意外触发bug，但是如果我打算这么做，我可以让它发生。我不知道这是否是我不得不忍受的事情。我工作了多一点，使用timeout参数几乎不可能复制。我很确定我不会再被这件事困扰了。干杯