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”(跨度)时，我都想切换 closet 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) :-)
});

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