使用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，请使用以下命令：

$(".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
});