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

我在使用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>

当你将鼠标悬停在顶级项，在它的子菜单（如果有的话）会降下来一个不错的，快速的滑动效果。问题在于，当您快速将鼠标悬停在“菜单”中并将鼠标放在菜单将为止但尚未达到的位置时：菜单将点击鼠标悬停动画的“结束”并跳回到隐藏状态状态，然后重复，直到从下拉菜单中删除鼠标。

来源

2009-10-28 Zack

如果我理解正确的问题，它尝试使用预建的jQuery菜单插件之一，因为在你的悬停调用中的第二功能（当指针离开匹配元素时调用的那个）在你进入子菜单时被调用。 – inkedmn 2009-10-28 16:35:32

有没有办法防止这种情况发生？我仍然非常新的jQuery，我可以强迫它不“排队”悬停的第二个功能，直到1st完成？ – Zack 2009-10-28 16:39:46

在mouseout功能也许增加一个检查能帮助：

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

来源

2009-10-28 16:41:39 Seb

你达人！这工作，谢谢一吨！ – Zack 2009-10-28 16:43:12

很高兴我可以帮助:) – Seb 2009-10-28 16:44:08

你可以尝试使用hoventIntent，一个jQuery插件，以检测悬停在元素使用者的意图帮助。

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

我修改你的例子有它，它似乎表现得更好。我说：

<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script>

和修改与悬停（单线）到：

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

我无法得到它的反弹，感觉更像是与hoverIntent行为弹出式视窗菜单应用。

最后，你可以为他们做这一切为你努力工作已经:)

来源

2009-10-28 16:42:14 wojo

一旦我很好地处理了jQuery，我将不得不查看插件，我仍然在重新发明轮子，所以我可以理解它的方式和原因。感谢您的建议，我已经为它添加了书签：> – Zack 2009-10-28 16:48:08

好的学习方法！ – wojo 2009-10-28 17:05:10

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

回答

相关问题