jQuery esnek saklama/alan gösterimi

Question

Bazı bölümleri, etiketlerini tıklatıp içeriklerini gösterme/gizleme seçeneği ile geliştirmek istiyorum.

Şu HTML şuna benzer:

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

Yani, bir fieldset legend tıklamasıyla üzerine, ebeveyn fieldset tıklanan efsane ama hiçbir şey konuma getirilebilir olmalıdır.

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

Ama bir şey (hatta ilk etapta içeriğini gizlemek değil) yapmaz:

Bunu kullanarak çalıştı. Tabii ki, sadece kullanıcının tıkladığı alanın görüntüsünü değiştirmek istiyorum, bu yüzden bir şekilde hangi efsanenin tıklandığını belirlemeli ve ardından ilgili alan kümelerinin içeriğini gizlemeliyim.

Elbette, onlara tüm kimlikleri verebilirim ve her bir küme için kod yazabilirim, ancak bunun yerine her zaman aynı olacağını gören gereksizdir, bence bu işlevsellik alanını herhangi bir miktar için evrensel hale getirmenin bir yolu olmalı. ..

Herkesin iyi bir fikri var mı? Ne olduysa

Answer 1

böyle buna div fieldset içeriğini kaydırmak ve ediyorum:

<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> 

Şimdi sen etiketi tıkladığında yukarı/aşağı içeriği kaydırıp bırakacaktır senin etiket görünür.

Answer 2

Bu, çalışır. Aynı konsept gerçekten, sadece tersidir.

Answer 3

Genişletilmiş versiyon

HTML (efsane içeriyor [-] aralığı):

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

JavaScript (jQuery gerektirir):

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