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 に答える