jquery - 使用jquery折叠功能？

Question

我有像下面这样的html，如果单击h2，我想要折叠功能，那么相关的子文件夹应该打开，如果其他子文件夹打开，那么它应该自动关闭。

<div class="RootFolder">
  <h2>One</h2>
  <div class="Subfolder">a</div>
</div>

<div class="RootFolder">
  <h2>two</h2>
  <div class="Subfolder">b</div>
</div>

<div class="RootFolder">
  <h2>three</h2>
  <div class="Subfolder">c</div>
</div>

css

.Subfolder{
 display:none;
}

我不知道如何实现这一点谢谢。

Answer 1

使用这种方式：

$("h2").click(function(){
  $(this).next(".Subfolder").show();
});

如果你想切换，使用这个：

$("h2").click(function(){
  $(this).next(".Subfolder").toggle();
});

通过加载，如果您希望.Subfolder隐藏所有 s，请使用以下命令：

$(".Subfolder").hide();

您需要提供所有这些内部$(document).ready();功能：

$(document).ready(function(){
    $(".Subfolder").hide();
    $("h2").click(function(){
        $(this).next(".Subfolder").toggle();
    });
});

小提琴：http: //jsfiddle.net/kBk2D/

Answer 2

你可以用这个

$(".Subfolder").hide(); //intially hiding all the `subfolder`
$("h2").click(function(){
   $(this).next('subfolder').show(); //showing only the div after h2
});