未应用jQuery hoverIntent“hoverOut”功能

Question

我最近遇到了一个问题，似乎没有多少在线搜索可以帮助解决 - 特别是在使用 jQuery hoverIntent 插件时，初始的“hoverIn”函数被正确调用，但“hoverOut”没有被应用.

作为快速背景，我在从无序列表创建的菜单上使用它，在“hoverIn”中使用 jQuery 的 .slideDown() 效果，在“hoverOut”函数中使用 .slideUp()。最初的 .slideDown() 有效，但是当光标离开该区域时，该元素会立即消失，而不是应用 .slideUp() 。同样，任何后续的 mouseover/mouseout 事件都不会触发“hoverIn”或“hoverOut”函数 - 需要完整的页面刷新才能应用初始“hoverIn”函数。

我尝试了许多不同的 jQuery 动画效果，包括 .fadeIn()、.fadeOut()、.show()、animate() 等 - 均未成功。我以前也遇到过这个问题很多次，我想知道可能是什么原因造成的。

这是我正在使用的 hoverIntent 代码：

var ddMainMenuConfig = {  
over: revealMainMenuChildren, // function = onMouseOver callback (REQUIRED)    
timeout: 700, // number = milliseconds delay before onMouseOut    
out: hideMainMenuChildren
};

function revealMainMenuChildren(){ $(this).find("ul").filter(":first").stop().slideDown(300); }

function hideMainMenuChildren(){ $(this).find("ul").filter(":first").stop().slideUp(500); }

$("#menu ul ul").parent().addClass("ddarrow").append("<span class=\"childIndicator\"></span>");
$("#menu ul ul").css({display: "none"}); // Opera Fix
$("#menu ul li").hoverIntent(ddMainMenuConfig);

如果您想查看发生这种情况的测试页面，请点击以下链接：

http://test.nimblehost.com/dexture/

对于为什么会发生这种情况以及如何解决它的任何建议，我们将不胜感激。我正在使用 jQuery v1.7.x，通过 Google CDN 提供服务，以及 hoverIntent 的 r6。

Answer 1

当我将鼠标悬停在您的菜单上时，我感觉不到 700 毫秒的延迟或看到动画，但菜单确实打开了。您是否可能有其他代码正在阻止 hoverIntent 打开和关闭菜单？尝试在悬停函数中添加调试语句，例如 console.log("foo") 或 alert("foo")，以确保它们被正确调用。

我知道这不是一个很好的答案，但我会尝试将您的页面精简为仅最基本的 HTML 和 JavaScript，然后在您完成工作后将其重新构建。

Answer 2

如果没有真正的测试环境，很难调试它，但我会做一些事情。

尝试使用或完全删除 stop()：

$(this).find("ul").filter(":first").stop(true, true)...

下面这一行，

$("#menu ul ul").parent().addClass("ddarrow")

应该是（注意上面的 2 ul）。这将转到其他 2 个类似的选择器。

$("#menu ul li").parent().addClass("ddarrow")

我认为，如果您更改上述内容，您将更接近解决您的问题。

您可能还想查看此演示以获得灵感，因为这与您正在做的事情相似。它也使用 jQuery 缓动，这在 IMO 中非常酷。

naviDropDown

Answer 3

我没有使用停止，而是在悬停函数中放置了一个 setTimeout 函数以及一个 console.log() 语句，这样你就可以验证它是否正常工作。

另外，请确保您的选择器正常工作

Answer 4

对于那些可能遇到同样问题并通过搜索找到此页面的人，我终于能够找到原因 - 我自己的菜单 CSS 代码是罪魁祸首。

更具体地说，我对菜单进行了样式设置，使其可以用作纯 CSS 的下拉菜单，以供可能禁用了 javascript 的访问者使用。这种样式显然是冲突的根源，因为删除控制悬停/隐藏样式的两行 CSS 代码允许 hoverIntent 插件按预期工作。

作为参考，这里有两行 CSS 代码，一旦删除，就可以让悬停功能正常工作：

/* Hide Drop Down Menu Items */
#menu ul li:hover ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li:hover ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul ul ul {display: none;}

/* Show on Hover */
#menu ul li:hover ul, #menu ul li li:hover ul, #menu ul li li li:hover ul, #menu ul li li li li:hover ul, #menu ul li li li li li:hover ul, #menu ul li li li li li li:hover ul, #menu ul li li li li li li li:hover ul, #menu ul li li li li li li li li:hover ul, #menu ul li li li li li li li li li:hover ul {display: block;}