Einfache Expand/Collapse divs> JQuery?

Question

Ich muss einige Griffe erweitern/reduzieren Griff zu einer Reihe von übergeordneten Container Divs in meiner Anwendung hinzufügen. Ist das etwas, das für eine Bibliothek wie jQuery zu einfach ist?

Beispiel:

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div> 

<div class="handleDiv"> expand | collapse 
    <div>child element</div> 
    <div>child element</div> 
</div> 

Answer 1

Probieren Sie etwas wie folgt aus:

$('.handleDiv').click(function() { 
    $(this).children().toggle(); 
}); 

Das wird der Inhalt der "handleDiv" s erweitern oder ausblenden, wenn Sie darauf klicken. Ich würde vorschlagen, diese "expand | collapse" -Sachen-Links zu erstellen und den Click-Handler an sie anzuhängen, so dass ein Klick auf eine beliebige Stelle im div diese nicht umschaltet.

Wenn Sie wollen, geschlossen beginnen, entweder Stil sie in Ihrem Stylesheet geschlossen: am Anfang meiner Antwort

.handleDiv div { 
    display: none; 
} 

oder fügen Sie ein „.Hide()“ bis zum Ende des jQuery-Schnipsel .

Answer 2

Ich habe gerade geschrieben habe ein Plugin, das zu tun.

Siehe http://sylvain-hamel.github.io/simple-expand/