javascript - 使用 jQuery(this).next() 显示/隐藏菜单中的下一个嵌套 UL

Question

每当单击“部分”时，我希望下一个 UL(子菜单)消失(或重新出现)。我可以让一个简单的 P 标签消失在这棵树之外，但我正在尝试使用 jQuery next();功能。如何使用 jQuery 选择此元素。我认为:

$(".section").click(function() {
   $(this).next('ul').hide();
});

会工作，但不会...这是 HTML:

  <div class="menu">
    <ul class="main-menu">
        <li class="section">
            Section 1
            <ul class="sub-menu" style="z-index: 3;">
                <li>
                    Section 1A
                </li>
                <li>
                    Section 1B
                </li>
                <li>
                    Section 1C
                </li>
                <li>
                    Back
                </li>
            </ul>
        </li>
        <li class="section">
            Section 2
            <ul class="sub-menu" style="z-index: 2;">
                <li>
                    Section 2A
                </li>
                <li>
                    Section 2B
                </li>
                <li>
                    Section 2C
                </li>
                <li>
                    Back
                </li>
            </ul>
        </li>
    </ul>
</div>

更新

Find() 工作正常。但现在我想知道如何使用带有文本“返回”的 li 元素来关闭子菜单。我在每个子菜单列表的最后一个 LI 元素中添加了一个类“back”，但 jQuery 似乎无法找到它并应用 CSS。这是我所拥有的:

//this code works
$(".section").click(function() {
   $(this).find('ul').css( "left", "0" );
});

//this code doesn't locate the previous UL (i also tried (".sub-menu").css()
$('.back').click(function() {
   $('.back').prev('ul').css( "left", "485" );
});

//html:

            <li class="section">
            Section 1
            <ul class="sub-menu" style="z-index: 3;">
                <li>
                    <a href="#section1a">Section 1A</a>
                </li>
                <li>
                    <a href="#section1b">Section 1B</a>
                </li>
                <li>
                    <a href="#section1c">Section 1C</a>
                </li>
                <li class="back">
                    <a href="#back">Back</a>
                </li>
            </ul>
        </li>

Answer 1

next影响标签的 sibling ，即另一个 .section标签，而 <li>您要操作的标签实际上是它的后代。因此你应该使用

$(".section").click(function() {
    $(this).find('ul').toggle();
});

find和 toggle方法是您需要的。