javascript - 选择器的有效方法

Question

我得到了这个结构：

<ul class="depth-one">
    <li>Category 1 <span class="do">+</span>
        <ul class="depth-two">
            <li > Category 1.1 <span class="do">+</span>
                <ul class="depth-three">
                    <li>Category 1.2.1</li>
                    <li>Category 1.2.2</li>
                </ul>
            </li>
            <li> Category 1.2</li>
            <li> Category 1.3</li>
        </ul>
    </li>
    <li> Category 2 <span class="do">+</span>
        <ul class="depth-two">
            <li>Category 2.1</li>
            <li>Category 2.2</li>
            <li>Category 2.3</li>
        </ul>
    </li>
    <li>Category 3 <span class="do">+</span>
        <ul class="depth-two">
            <li>Category 3.1</li>
            <li>Category 3.2</li>
            <li>Category 3.3</li>
        </ul>
    </li>
</ul>

使用该 CSS：

ul{
    list-style:none;
    padding:0;
    margin:0;
}
ul li{
    width:220px

}
.depth-one{

}
.depth-two{
    display:none;
}
.depth-three{
    display:none;
}

.do{
    float:right;
    font-weight:bold;
    color:blue;
    cursor:pointer;
}

我想要做的是，每当我单击“do”类（跨度）时，我都想切换壁橱 UL 元素。

如何使用 jQuery 将壁橱 UL 元素选择到跨度，这样我就可以使用函数 slideUp 和 slideDown 来切换它？

我的想法是使用函数 next()，但我认为有一种更通用的方法可以做到这一点。

提前致谢！

Answer 1

嗯，.next()实际上是完美的

$('.do').on('click', function() {
    $(this).next('ul').slideToggle().find('ul:visible').slideUp(); // According to your comment; hide all the visible successors of type ul.
    $(this).text( $(this).text() == '+' ? '-' : '+' ); // Alter the caption (which I guess you want to do as well) :-)
});

编辑：为所有子 ul 添加了隐藏以匹配您的评论。

Answer 2

您可以使用 jQuery.next()方法

例子：

$(".do").click(function () {
    $(this).next("ul").slideToggle()
});

Answer 3

尝试这个

$(".do").click(function () {
    $(this).next().closest("ul").slideToggle();
});

小提琴