使用jQuery選擇所有子代和子代

Question

我有一些由WordPress插件生成的HTML，該HTML插件旨在允許可擴展/可折疊的文本，其深度最多為三個級別。 我想這樣，如果您要折疊第一層或第二層，並且下面的孩子也要展開，那么那些孩子也將崩潰，但是我所使用的似乎不允許所有孩子的選擇。 到目前為止，這是我正在使用的：

$(".hidden-text-toggle").click(function () {
    if ($(".hidden-text:animated").length) return false;
        $(this).next().slideToggle();
        if ($(this).hasClass('expanded') ){     
            $(this).removeClass('expanded');
            $(this).animate({ backgroundColor: "black" , color: "red"});    
        }
        else
        {
            $(this).addClass('expanded');
            $(this).animate({backgroundColor: "red" , color: "black"});

        }
        return false;
    });

<div class="wrapper">
    <h2 class="title">Level One</h2>
    <div class="text" href="#">
        This is level one text.
        <div class="wrapper">
            <h2 class="title" href="#">Level Two</h2>
            <div class="text">
                This is level two text.
                <div class="wrapper">
                    <h2 class="title" href="#">Level Three</h2>
                    <div class="text">                          
                        This is level three text. 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我本以為放像$(this).find(".text").slideUp(); 第4行之后將允許這樣做，但顯然我錯了。

任何幫助將非常感激！

Answer 1

您可以在每個元素上進行通用的slideUp （與find結合使用）：

$("div.wrapper").find("div").slideUp();

請注意，這實際上是選擇根節點下的每個div ，然后將每個高度的動畫設置為零。 高度已經為零的任何元素都不會受到影響。

Answer 2

嘗試：

$("h2.title").click(function () {
    $(this).next().slideToggle();
});​

小提琴： http : //jsfiddle.net/iambriansreed/amppK/

文件： http ： //api.jquery.com/toggle-event/