Question

尝试在这里制作一个简单的jquery，这里是我的代码：

HTML：

    <ul id="nav">
        <li>
            <a href="">Cats</a>
            <ul>
                <li><a href="">Tigers</a></li>
                <li><a href="">Lions</a></li>
                <li><a href="">Leopards</a></li>
            </ul>
        </li>
        <li>
            <a href="">Dogs</a>
            <ul>
                <li><a href="">Wolves</a></li>
                <li><a href="">Dingos</a></li>
                <li><a href="">Dholes</a></li>
            </ul>
        </li>            
    </ul>

CSS：

ul#nav { border: 1px solid #ccc; overflow: hidden; background: #eee; padding: 0; }
ul#nav li { display: block; float: left; border-right: 1px solid #ccc; padding: 10px 20px; }

ul#nav li ul { display: none; border: 1px solid #ccc; overflow: hidden; position: absolute; background: #eee; width: 100px; padding: 0; margin: 10px 0 0 -20px; border-bottom: none; }
ul#nav li ul li { display: block; float: left; width: 100%; border-bottom: 1px solid #ccc; }

jQuery的：

$(document).ready(function() {

    $('ul#nav > li > a').mouseover(function() {
            $(this).parent().find('ul').slideDown('fast');
    });

    $('ul#nav > li > a').mouseout(function() {
            $(this).parent().find('ul').slideUp('fast');
    });

});

现在问题是，当用户不再悬停在导航链接上时，下拉ul会消失。如果用户没有将鼠标悬停在导航链接上或悬停在下拉列表ul上，我需要它离开。怎么做？

Answer 1

http://jsfiddle.net/Bdpnd/

$(document).ready(function() {

    $('ul#nav > li').hover(function() {
        $(this).children('ul').slideDown('fast');
    },function() {
        $(this).children('ul').stop(true, true).slideUp('fast');
    });

});

我做了一个悬停只是为了缩短它，但主要的是让它下降到li而不是a，因为li会扩展以容纳内容，所以你实际上不会离开li悬停在新元素上时。

Answer 2

您的代码在锚点上绑定mouseout，当鼠标离开此时并将鼠标悬停在ul上时会触发mouseout事件。

尝试在ul＃nav＆gt;中绑定事件li，用以下代码替换你的代码：

$('ul#nav > li').mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find('ul').slideDown('fast');
}).mouseleave(function(){
    var someelement = this;
    var timeoutId = setTimeout(function(){ $(someelement).find('ul').fadeOut("slow");}, 650);
    $(someelement).data('timeoutId', timeoutId);
});

您可以确定超时，增加navegability和用户xp

如何在jQuery中检测两个元素的mouseout？

2 个答案: