我有一些由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>
我原本以为在第4行之后添加类似$(this).find(".text").slideUp();
的东西会允许这样但显然我错了。
非常感谢任何帮助!
答案 0 :(得分:0)
您可以在每个元素上执行全面 slideUp (与 find 结合使用):
$("div.wrapper").find("div").slideUp();
请注意,这实际上是选择根节点下的每个 div ,然后将每个 div 的高度设置为零。任何已经为零高度的元素都不会受到影响。
答案 1 :(得分:0)
尝试:
$("h2.title").click(function () {
$(this).next().slideToggle();
});