Javascript 使用jQuery（this）.next（）显示/隐藏菜单中的下一个嵌套UL

无论何时单击“部分”，我都希望下一个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>

第一节


第1A节


第1B节


第1C节


返回




第二节


第2A节


第2B节


第2C节


返回

更新

Find（）工作得很好。但是现在我想知道如何使用包含文本“Back”的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>

//此代码有效
$（“.section”）。单击（函数（）{
$（this.find（'ul'）.css（“左”，“0”）；
});
//此代码没有找到以前的UL（我也尝试了（“.sub-menu”）.css（）
$（'.back'）。单击（函数（）{
$（'.back'）.prev（'ul'）.css（“左”，“485”）；
});
//html:

第一节

在您的代码中，您使用

next（）

查看下一个兄弟姐妹，而您希望查看下一个兄弟姐妹。要定位他们，您可以使用

find（filter）

函数。通过查找

ul

，您可以使用

toggle（）

或

slideToggle

切换其可见性

我还在子菜单上添加了一个额外的点击功能，防止点击子菜单关闭子菜单

$（函数（）{
$（'.section'）。单击（函数（）{
$（this.find（'ul'）.slideToggle（）；
}).children（）。单击（函数（））{
返回false；
});
})；

第一节

第1A节
第1B节
第1C节
背



第二节

第2A节
第2B节
第2C节
背

下一步

影响标记的同级，即其他

.section

标记，而要操作的

标记实际上是它的后代。因此，您应该使用

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

---

find

和

toggle

方法就是你需要的方法。

试试

$（这个）。查找（'ul'）.hide（）；

也试试

。toggle

隐藏和显示，而不是

。hide

。试试@KartikeyaKhosla的答案你的答案不起作用的原因是在.next（）函数可以选择当前所选元素的下一个同级。在本例中，可以选择第一个

，在调用next（）时，它将为您提供第二个

。find（）还会深入子元素并查找给定的选择器。此外，toggle（）如果你想在同一次点击中同时实现这两个功能，它非常适合隐藏和显示。谢谢大家，toggle（）或slideToggle绝对是最好的选择，我之所以使用hide（），是因为我想快速隐藏元素以知道它正在工作。Ted，如果我想“返回”子菜单，而不是其他三个元素，有没有办法做到这一点？猜测back应该关闭子菜单：

$（'.sub-menu li:last'）。单击（function（）{$（this.parent（）.slideUp（）；}）；