Question

我试图找出为什么这个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隐藏子菜单，显示：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();
    }
);

});

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

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

Answer 1

它不会立即关闭，因为元素是您悬停的东西的子元素。因此，当悬停在该区域上时，它会认为您仍然在该区域上空盘旋。

Answer 2

为什么不使用

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

});

为什么这个jquery-Script有效？（关于悬停下拉列表）

2 个答案:

为什么这个jquery-Script有效？ （关于悬停下拉列表）

2 个答案:

为什么这个jquery-Script有效？（关于悬停下拉列表）