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元素到span，所以我可以使用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) :-)
});

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

Answer 2

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

示例：

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

Answer 3

试试这个

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

FIDDLE

选择器的有效方式

3 个答案: