Question

我有一个有子视图的导航。当用户将鼠标悬停在导航栏中的li上时，我会显示相应li的子区域。我遇到了一个问题，将鼠标从导航器移动到subnav会触发mouseout。我以为我需要实现超时但不确定从哪里开始并且无法使其正常工作。请参阅以下js小提琴......

http://jsfiddle.net/Nhvc6/

Answer 1

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

其次，您可以实现计时器，也可以使用精彩的jQuery hoverIntent plug-in。

Answer 2

尝试更换：

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

有了这个：

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

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

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

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

Updated Fiddle

更多信息

Set timeout MDN

Answer 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'，因为subnav是'li'的一部分。当你离开subnav或其父'li'时，'mouseleave'事件会触发。在jFiddle中为我工作得很好。

我也会亲自为你的subnav使用'ul'，正如我上面所做的那样。在语义上，对我来说更有意义。

移动到subnav时jquery悬停触发mouseout

3 个答案: