0

我试图弄清楚为什么这个 jquery 脚本工作得很好。

这是html：

<html>
<head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="hover.js"></script>
</head>
<body>
        <ul id="nav">
            <li><a href="#">Parent 01</a></li>
            <li><a href="#" class="selected">Parent 02</a>
                <ul id="dropdown" style="display: none;">
                    <li><a href="#">Item 01</a></li>
                    <li><a href="#" class="selected">Item 02</a></li>
                    <li><a href="#">Item 03</a></li>
                </ul>
            </li>
            <li><a href="#">Parent 03</a>
            <ul>
                <li><a href="#">Item 04</a></li>
                <li><a href="#">Item 05</a></li>
                <li><a href="#">Item 06</a></li>
                <li><a href="#">Item 07</a></li>
            </ul>           
            </li>
            <li><a href="#">Parent 04</a></li>
         </ul>
</body>
</html>

如您所见，只是一个简单的菜单。现在我使用 css 来隐藏带有 display:none; 的子菜单。

和jQuery：

$(document).ready(function () { 

$('#nav li').hover(
    function () {
        //show its submenu
        alert('enter');
        $('#dropdown', this).show();

    }, 
    function () {
        //hide its submenu
        alert('leave');
        $('#dropdown', this).hide();
    }
);

});

现在我没有得到的是：为什么，当我用鼠标离开“Parent 02”（悬停到子菜单项）时，它不会立即触发“mouseleave”事件，而是会等到子导航的事件被处理。我只能假设它必须处理事件队列。

现场演示： http: //paugasolin.funpic.de/test.html

4

2 回答 2

1

它不会立即关闭，因为元素是您悬停的事物的子元素。因此，当您悬停在该区域上时，它认为您仍悬停在该区域上。

于 2013-04-14T00:07:35.280 回答
0

为什么不使用

$('#nav li').hover(function() {
    //show its submenu
    alert('enter');
    $(this).children('#dropdown').show();

});
于 2013-04-12T22:41:32.487 回答