0

我最近遇到了一个问题，似乎没有多少在线搜索有助于解决 - 特别是在使用 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。

4

4 回答 4

0

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

尝试完全使用或删除 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 中非常酷。

导航下拉

于 2012-04-03T04:36:15.420 回答
0

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

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

于 2012-04-03T04:41:57.763 回答
0

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

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

于 2012-04-03T03:39:46.283 回答
0

对于那些可能遇到同样问题并通过搜索找到此页面的人，我终于能够找到原因——我自己的菜单 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;}
于 2012-04-06T03:45:41.273 回答