Question

我最近遇到了一个问题，即没有任何在线搜索似乎有助于解开 - 特别是，当使用jQuery hoverIntent插件时，初始的“hoverIn”函数被正确调用，但“hoverOut”未被应用

作为快速背景，我在从无序列表创建的菜单上使用它，jQuery的.slideDown（）效果在“hoverIn”和.slideUp（）中用于“hoverOut”函数。最初的.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和r6的hoverIntent提供。

Answer 1

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

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

Answer 2

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

尝试完全使用或删除stop（）：

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

以下这一行，

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

应该是（注意上面的2 ul）。这是另外两个类似的选择器。

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

我认为，如果你改变上述内容，你就会更接近解决问题。

你也可能想看看这个演示的灵感，因为这与你正在做的类似。它正在使用jQuery缓动，这是非常酷的IMO。

naviDropDown

Answer 3

而不是使用stop，我将一个setTimeout函数和一个console.log（）语句放在hover函数中，这样你就可以验证它是否有效。

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

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;}

jQuery hoverIntent“hoverOut”函数未被应用

4 个答案: