jQuery लचीला छुपा/फ़ील्ड का शो

Question

मैं अपने लेबल पर क्लिक करने के बाद अपनी सामग्री को दिखाने/छिपाने के विकल्प के साथ कुछ फ़ील्ड को बढ़ाने के लिए चाहता हूं।

वर्तमान में, एचटीएमएल इस तरह दिखता है:

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

तो, एक fieldset legend के क्लिक पर, कुछ भी लेकिन माता-पिता fieldset के क्लिक किया कथा चालू किए जाने की जानी चाहिए।

मैं इस उपयोग करने की कोशिश:

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

लेकिन यह कुछ भी (यहां तक ​​कि पहली जगह में सामग्री छिपा नहीं) नहीं करता है। निस्संदेह मैं केवल उस फ़ील्ड पर दृश्य को टॉगल करना चाहता हूं जिसे उपयोगकर्ता ने क्लिक किया है, इसलिए इसे किसी भी तरह से निर्धारित करना होगा कि कौन सा किंवदंती क्लिक किया गया था और फिर संबंधित फ़ील्ड की सामग्री को छुपाएं।

निश्चित रूप से, मैं उन्हें सभी आईडी दे सकता हूं और प्रत्येक फ़ील्ड के लिए कोड लिख सकता हूं, लेकिन यह अपेक्षाकृत अनावश्यक है कि यह हमेशा एक जैसा होगा, मुझे लगता है कि इस कार्यक्षमता को किसी भी क्षेत्र के लिए सार्वभौमिक बनाने का एक तरीका होना चाहिए। ..

किसी के पास एक साफ विचार है?

Answer 1

अगर मैं तुम्हें था मैं उस तरह div में fieldset की सामग्री लपेट चाहते हैं, और यह करने के लिए: जब आप लेबल पर क्लिक

<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

विस्तारित संस्करण

एचटीएमएल (कथा में शामिल है [-] अवधि): एक ही रास्ता निश्चित रूप से यह करने के लिए thats

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