jQuery $ .hover用于导致“弹跳”的子菜单

我在使用jQueryhover方法时遇到了一些麻烦。

这是相关的JavaScript代码：

$("#navigation > li > ul").hide(); $("#navigation > li").hover( function() { $(this).children("ul").slideDown(125); }, function() { $(this).children("ul").slideUp(125); } ); 

这是相应的HTML：

 
 
Top Level Item #1
 
 Top Level Item #2 
 
Sub-Menu Item #2-1
 
Sub-Menu Item #2-2
 
Sub-Menu Item #2-3
 
 
  

每当您将鼠标hover在顶级项目上时，其中的子菜单（如果有）将下拉并具有漂亮，快速的幻灯片效果。 问题是当你快速鼠标hover在菜单中并将鼠标放在菜单所在但尚未到达的位置时：菜单将点击鼠标hover动画的“结束”并弹回到隐藏状态，并重复，直到从下拉菜单中删除鼠标。

Answer 1

也许在mouseout函数中添加一个检查可能会有所帮助：

 if( !$(this).children("ul").is(":animated") ){ $(this).children("ul").slideUp(125); } 

Answer 2

您可以尝试使用hoventIntent，这是一个jQuery插件，可帮助检测hover在元素上的用户的意图。

http://cherne.net/brian/resources/jquery.hoverIntent.html

我用它修改了你的例子，它看起来表现得更好。 我补充说：

并使用hover（）修改单行：

 $("#navigation > li").hoverIntent( 

我无法让它反弹，它感觉更像是一个弹出菜单，应用了hoverIntent行为。

最后，您可以尝试使用其中一个预先构建的jQuery菜单插件，因为他们已经为您完成了所有这些艰苦工作:)