jQuery $ .hover用于导致“弹跳”的子菜单
-
08-07-2019 - |
题
我在使用jQuery悬停方法时遇到了一些麻烦。
以下是相关的JavaScript代码:
$("#navigation > li > ul").hide();
$("#navigation > li").hover(
function() {
$(this).children("ul").slideDown(125);
},
function() {
$(this).children("ul").slideUp(125);
}
);
这是相应的HTML:
<ul id="navigation">
<li><a href="#">Top Level Item #1</a></li>
<li>
<a href="#">Top Level Item #2</a>
<ul>
<li><a href="#">Sub-Menu Item #2-1</a></li>
<li><a href="#">Sub-Menu Item #2-2</a></li>
<li><a href="#">Sub-Menu Item #2-3</a></li>
</ul>
</li>
</ul>
每当您将鼠标悬停在顶级项目上时,其中的子菜单(如果有)将下拉并具有漂亮,快速的幻灯片效果。问题是当你将鼠标悬停在“进入”状态时快速菜单并将鼠标保持在菜单 但尚未到达的位置:然后菜单将点击“结束”菜单。鼠标悬停动画并弹回到隐藏状态,然后重复,直到从下拉菜单中删除鼠标为止。
解决方案
也许在 mouseout
函数中添加一个检查可能会有所帮助:
if( !$(this).children("ul").is(":animated") ){
$(this).children("ul").slideUp(125);
}
其他提示
您可以尝试使用hoventIntent,这是一个jQuery插件,可帮助检测悬停在元素上的用户的意图。
http://cherne.net/brian/resources/jquery.hoverIntent.html
我用它修改了你的例子,它看起来表现得更好。我补充说:
<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script>
并使用hover()将单行修改为:
$("#navigation > li").hoverIntent(
我无法反弹,感觉更像是一个弹出菜单,并且应用了hoverIntent行为。
最后,您可以尝试使用其中一个预先构建的jQuery菜单插件,因为他们已经为您完成了所有这些艰苦的工作:)
不隶属于 StackOverflow