jQueryフレキシブルなフィールドセットの非表示/表示

Question

ラベルをクリックするとその内容を表示/非表示するオプションを使用して、一部のフィールドセットを拡張したいと考えています。

現在、HTMLは次のようになります。

<fieldset> 
    <legend>Fieldset 1</legend> 
    <!-- Some input, p, div, whatever --> 
</fieldset> 
<fieldset> 
    <legend>Fieldset 2</legend> 
    <!-- Some input, p, div, whatever --> 
</fieldset> 

ので、1 fieldset legendのクリックで、親フィールドセットのクリックされた伝説が、何がトグルしなければなりません。

私はこれを使用してみました。（でも最初の場所で内容を隠していない）

$("fieldset *:not(legend)").hide(); 
$("fieldset legend").click(function(){ 
    $(this).nextAll().slideToggle(); 
}); 

しかし、それは何もしません。もちろん、ユーザーがクリックしたフィールドセットだけを表示したいので、何の凡例がクリックされたのかを判断してから、対応するフィールドセットの内容を非表示にする必要があります。

確かに、私はすべてのIDを与え、すべてのフィールドセットのコードを書くことができますが、それは常に同じであることを見て冗長です、私はこの機能を任意の量のフィールドセットに共通にする方法がなければならないと思います。 ..

誰でもきちんとした考えがありますか？

Answer 1

私があなただった場合、私はそのようにdiv要素で、それにフィールドセットの内容をラップしたい：

<script type="text/javascript"> 
     $(function(){ 
      $('legend').click(function(){ 
       $(this).parent().find('.content').slideToggle("slow"); 
      }); 
     }); 
</script> 

<fieldset> 
    <legend>Fieldset 1</legend> 
    <!-- Some input, p, div, whatever --> 
    <div class="content"> 
     this<br /> 
     is<br /> 
     content<br /> 
    </div> 
</fieldset> 
<fieldset> 
    <legend>Fieldset 2</legend> 
    <!-- Some input, p, div, whatever --> 
    <div class="content"> 
     this<br /> 
     is<br /> 
     content<br /> 
    </div> 
</fieldset> 

ラベルをクリックしたときだから今、それはアップ/ダウンコンテンツをスライドし、あなたを残しますラベルが表示されます。

Answer 2

$(function(){ 
    $('legend').click(function(){ 
    $(this).siblings().slideToggle("slow"); 
    }); 
}); 

これは機能します。それは本当に同じ概念です、逆のことです。

Answer 3

拡張バージョン

HTML（伝説が含まれている[ - ]スパン）：

<fieldset> 
    <legend>My Area <span>[-]</span></legend> 
    Content of fieldset... 
</fieldset> 

のJavaScript（jQueryのが必要です）：

$(function(){ 
    // Set cursor to pointer and add click function 
    $("legend").css("cursor","pointer").click(function(){ 
     var legend = $(this); 
     var value = $(this).children("span").html(); 
     if(value=="[-]") 
      value="[+]"; 
     else 
      value="[-]"; 
     $(this).siblings().slideToggle("slow", function() { legend.children("span").html(value); }); 
    }); 
});