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の を非表示にする場合は、次を使用します。

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