jQuery下拉菜单闪烁答案

【问题标题】：jQuery dropdown menu flickeringjQuery下拉菜单闪烁
【发布时间】：2013-11-28 05:11:44
【问题描述】：

我的下拉菜单使用 jquery slideDown 和 slideUp 函数时遇到问题。

如果您将鼠标悬停在下拉菜单 UL 上，如果您在它仍在向上滑动时将其移出并移回内部，它会开始闪烁/闪烁，就好像它正在快速快速触发 mouseenter 和 mouseleave 事件一样。

我已经设置了一个小提琴来说明这个问题：http://jsfiddle.net/LxL8Q/3/

在 Chrome 中，它只会闪烁一秒钟，然后会自行修复，但在 Firefox 中，它会无限期地继续闪烁。

我知道这里有很多与闪烁的 jQuery 相关的问题，但我找不到任何可以帮助我的答案。

我确实尝试用一个简单的悬停功能替换整个 .each 循环，但在这样做之后，我的上滑和下滑动画无法正常工作。

【问题讨论】：

尝试使用默认值.stop()。 jsfiddle.net/j08691/LxL8Q/4
@j08691 这很好用，你知道是否有一种简单的方法让它向下滑动而不是在它部分折叠时停止它？

标签： jquery drop-down-menu

【解决方案1】：

试试这个：

(function($){  

var nav = $("#topNav");  

nav.find("li").each(function() {  
if ($(this).find("ul").length > 0) {  

    //show subnav on hover  
    $(this).mouseover(function() {  
        $(this).find("ul").slideDown(300);  
    });  
    //hide submenus on exit  
    $(this).mouseleave(function() {  
        $(this).removeClass('active').find("ul").stop(true).slideUp(300);  
    });  
 }  
});

})(jQuery);

【讨论】：

当我这样做时，我完全失去了滑动动画
您希望它在向上或向下滑动后停止。
哦，我在 IE 中看到它没有动画
有了这个解决方案，我根本没有任何滑动。在 Firefox 中也是如此。
现在可以解决问题了，您知道是否有一种简单的方法可以让它重新打开而不是停止部分折叠？

【解决方案2】：

我遇到了这个问题并找到了解决方案：在slideUp(300) 之前添加delay(50)。在此处查看新小提琴：http://jsfiddle.net/LxL8Q/42/

【讨论】：