jquery - 在 jQuery 中，如何指定仅在特定区域执行某个功能？

Question

我有这个 jQuery 片段:

$(function() {
        $("ul > li").hover(function() {
          $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
        });
    });

此打开时间为 <ul>另一个里面有什么<ul> ，但我只想做这个:

<div id="header"></div>

编辑

这是结构，我修改了一下，本来我想把它添加到我的header id中但我认为这样更好:

<ul id="navigation">
    <li>List item 1 
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
        </ul>
    </li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

如果问题很愚蠢，请不要吃我，我真的是 jQuery 新手:)

Answer 1

假设 #navigation div 中只有一个 ul:

$('#navigation ul > li').hover( /* rest of jQuery function */ );

上面使用的选择器仅选择 ul 的直接后代的 li 元素，而 ul 本身又是 id="navigation" 元素的后代。

您还可以简单地将 id 应用于 ul，例如 id="navList"，然后使用:

$('#navList > li').hover( /* rest of jQuery function */ );

<小时/> 编辑按照OP更改的问题/发布(x)html。

给出以下标记:

<ul id="navigation">
    <li>List item 1 
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
        </ul>
    </li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

假设他希望用户将鼠标悬停在 li 元素上以显示 li 的子 ul:

$('#navigation > li').hover(
// selects any li that's a direct descendant of the ul with id="navigation"
    function() {
        $('ul', this).stop(true,true).animate({opacity:'toggle'},fast);
        // looks for 'ul' elements inside the currently-selected 'this' object.
        // have a look at the jQuery api for more information on this approach: http://api.jquery.com/jQuery/
    }
);

请注意，我尚未测试您尝试应用的功能，我相信您已经可以使用它了。