移动到子导航时jquery悬停触发mouseout答案

【问题标题】：jquery hover firing mouseout when moving to subnav移动到子导航时jquery悬停触发mouseout
【发布时间】：2012-04-01 14:55:09
【问题描述】：

我有一个带有子导航的导航。当用户将鼠标悬停在导航中的 li 上时，我会显示相应 li 的子导航。我遇到了一个问题，将鼠标从导航移动到子导航会触发鼠标移出。我在想我需要实现一个超时，但不确定从哪里开始并且无法让它工作。请参阅下面的 js fiddle...

http://jsfiddle.net/Nhvc6/

【问题讨论】：

标签： jquery hover

【解决方案1】：

尝试替换：

timeoutHandle = setTimeout(navMouseOut($subnav), 300);

有了这个：

timeoutHandle = setTimeout(navMouseOut, 300, $subnav); //Works for all but IE!!

这会将引用传递给函数navMouseOut。 navMouseOut 参数$subnav 也作为第三个参数传递给setTimeout。注意setTimeout 的第三个参数将被 IE 忽略。但适用于所有现代浏览器。

如果您需要跨浏览器的可比性，您应该将匿名函数传递给setTimeout，以便调用navMouseOut

timeoutHandle = setTimeout(function() {
    navMouseOut($subnav);
}, 300);

Updated Fiddle

更多信息

Set timeout MDN

【讨论】：

【解决方案2】：

两件事，首先你应该使用mouseenter/mouseleave（感谢jQuery）而不是mouseover/mouseout。这些在移动到子元素时不会触发。请参阅this 和this。

其次，你既可以实现一个定时器，也可以使用美妙的jQuery hoverIntent plug-in。

【讨论】：

我使用的是hover()，而不是单独的 jquery 函数
好吧，要么你必须使用 hoverIntent()，检查答案中的扭结，或者使用这些方法。这是正确的方法。

【解决方案3】：

如果您不介意 subnav 的行为取决于适当的 css 定位，则在这种情况下完全跳过计时器。这是您可以做什么的想法（与您在 jFiddle 中的内容相比大大简化了）

HTML：

<ul id="nav">
<li>Howdy
    <ul class="subnav">
        <li>Howdy</li>
        <li>Howdy</li>
        <li>Howdy</li>
    </ul>
</li>
<li>Howdy
    <ul class="subnav">
        <li>Howdy</li>
        <li>Howdy</li>
        <li>Howdy</li>
    </ul>
</li>

CSS：

#nav {
margin-top: 0 !important;
width: 200px;
}

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    position: relative;
    display: block;
    margin: 0 0 3px 0;
    border:thin solid black;
}

.subnav {
    position: absolute;
    margin: none;
    left:198px;
    top:-1px;
    width: 200px;
    display: none;
}

Javascript：

$('#nav li').mouseenter(function(event) {
    $(this).children().show();
});

$('#nav li').mouseleave(function(event) {
    $(this).children().hide();
});

这里重要的是：只要导航列表项和它的子导航列表是接触的，'mouseleave' 或'mouseout' 事件不会在'li' 上触发，因为子导航是'li' 的一部分。当您离开子导航或其父“li”时，会触发“mouseleave”事件。在 jFiddle 中为我工作得很好。

我也会亲自为您的子导航使用“ul”，就像我在上面所做的那样。从语义上讲，对我来说更有意义。

【讨论】：