jquery - jquery 中的下拉子菜单出现问题

Question

我正在使用 jquery 制作下拉子菜单，但是当我将鼠标悬停在任何主导航链接上时，所有子菜单都会下拉。我相信我需要用 this() 做一些事情，但我似乎无法得到正确的语法。这是一个 fiddle http://jsfiddle.net/xzN5G/

这是我的 HTML

<nav id="nav">
    <ul class="nav">
        <li class="mainli"><a href="" class="selected">Home</a>
            <ul class="submenu">
                <li>s1111111</li>
                <li>a2222222</li>
                <li>g3333333</li>
                <li>y4444444</li>
            </ul>
        </li>    
        <li class="mainli"><a href="album.html">My Photos</a>
            <ul class="submenu">
                <li>11111111</li>
                <li>22222222</li>
                <li>33333333</li>
                <li>44444444</li>
            </ul>
        </li>
        <li class="mainli"><a href="travel.html">My Travel</a>
            <ul class="submenu">
                <li>aaaaaaaaaa</li>
                <li>bbbbbbbbbb</li>
                <li>cccccccccc</li>
                <li>dddddddddd</li>
            </ul>
        </li>
        <li class="mainli"><a href="aboutwork.html">About Work</a>
            <ul class="submenu">
                <li>rgre1111</li>
                <li>estg22</li>
                <li>thser3333</li>
                <li>rtyr4444</li>
            </ul>
        </li>
        <li class="mainli"><a href="portfolio.html">My Portfolio</a>
            <ul class="submenu">
                <li>qqqqqqqq</li>
                <li>tttttttt</li>
                <li>ppppppppp</li>
                <li>yyyyyyyyyy</li>
            </ul>
        </li>
        <li class="mainli"><a href="contact.html">Contact Me</a>
            <ul class="submenu">
                <li>99999999</li>
                <li>88888888</li>
                <li>77777777</li>
                <li>66666666</li>
            </ul>
        </li>
    </ul>
</nav>  

和我的jquery

$(document).ready(function(){
    $(".mainli").hover(function() {
        $(".submenu").slideDown("medium");
    }, function () {
        $(".submenu").slideUp("medium");
    })
});

Answer 1

您需要在 $(this) 中搜索 .submenu，find() 方法将为您完成此操作。只要 .submenu 是 this() 的直接子级，children() 在您的情况下也能正常工作。另一方面，find() 在所有后代(又名子代、孙子等)中搜索

根据What is fastest children() or find() in jQuery?两个函数的速度没有太大差异

$(document).ready(function () {
    // $(".submenu").slideUp("medium");
    $(".mainli").hover(function () {
        $(this).find(".submenu").slideDown("medium");
    },

    function () {
        $(this).find(".submenu").slideUp("medium");
    });
});

我在你的 fiddle 中尝试了这个，它有效，你可能需要取消注释该行 $(".submenu").slideUp("medium"); 以便所有菜单开始关闭。