0

我有一些由 WordPress 插件生成的 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 行之后放置类似的东西会允许这样做，但显然我错了。

任何帮助将非常感激！

4

2 回答 2

0

您可以在每个元素上做一个全面的slideUp （与find结合使用）：

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

请注意，这实际上是选择根节点下的每个div ，然后将每个 div 的高度设置为零。任何已经为零高度的元素都不会受到影响。

于 2012-06-26T06:03:00.230 回答
0

尝试：

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

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

文档：http ://api.jquery.com/toggle-event/

于 2012-06-26T08:12:40.833 回答