3

私はこの構造を得ました：

<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() を使用することでしたが、それを行うためのより一般的な方法があると思います。

前もって感謝します！

4

3 に答える 3

5

まあ、.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 の非表示を追加しました。

于 2013-08-07T09:34:20.107 に答える
3

jQuery.next()メソッドを使用できます

例：

$(".do").click(function () {
    $(this).next("ul").slideToggle()
});
于 2013-08-07T09:36:37.340 に答える
0

これを試して

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

フィドル

于 2013-08-07T09:46:02.327 に答える