Benötigen Sie einen einfachen zusammenklappbaren Gizmo

Question

Das ist irgendwie komisch; Ich habe jQuery und Bootstrap gelernt, und beide haben so viele coole Werkzeuge, aber ich stehe auf einen der einfachsten Tricks im Buch: ein einfaches zusammenklappbares Element.

fand ich den perfekten Kandidaten here:

<div data-role="collapsible"> 
    <h3>I'm a header</h3> 
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
</div> 

Das einzige Problem ist, dass es jQuery Mobile, und ich bin nicht sicher, ob es eine gute Idee ist meinen Code mit mehr JavaScript und JS aufblasen. Bevor ich also jQuery Mobile implementiere, möchte ich fragen, ob jemand eine Alternative empfehlen kann, die mit jQuery, Bootstrap usw. funktioniert.

Ein Problem ist, dass ich versuche, ein Multi-Level-Gizmo zu machen. die anfängliche Taste oder Überschrift klicken, wird eine Reihe von Schaltflächen wie diese zeigen:

<button id="na" class="btn btn-na"><b>North America</b></button> 
<div id="div-na"></div> 
<button id="sa" class="btn btn-sa"><b>South America</b></button> 
<div id="div-sa"></div> 

Ein Klick auf Nordamerika, etc. AJAX aufrufen, um eine Liste der Länder anzuzeigen. Ein Problem, das ich habe, ist, dass, wenn ich auf den Nordamerika-Knopf klicke, das "Ich bin ein Vorsatz" es innen geschachtelt schließt.

Eine andere Möglichkeit ist umgekehrt die Header in meinem Hauptinhalt zu konstruieren, die von Hand geöffnet oder geschlossen werden kann ...

<ul class="ulMain"> 
    <li data-toggle="collapse" data-target="#d1"><a href="#introduction" title="Introduction" class="NavLink">&#8226; D1 <small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small></a></li> 

    <div id="d1">D1</div> 
</ul> 

Aber ich habe nicht herausgefunden, wie die Standardeinstellungen zu ändern, aus erweitert zusammengebrochen.

Zusammenfassend, ich bin nur auf der Suche nach einem sehr einfachen Gizmo, das 1) Inhalte standardmäßig versteckt und 2) nicht nach dem Öffnen geschlossen wird, bis ein Benutzer erneut darauf klickt. In der Tat, ich dachte, es gibt einen Weg, dies mit einfachen CSS zu tun, aber ich kann mich nicht erinnern.

Answer 1

Bootstrap Kollaps/Akkordeon kann den Inhalt standardmäßig verbergen, lassen Sie einfach die in Klasse von der ersten Platte im Beispiel: http://getbootstrap.com/javascript/#collapse-example-accordion

Soweit die Platten offen zu halten, bis ihr Kopf wieder gewählt wird, ohne Zugabe js, gibt es eine große Antwort für das hier: https://stackoverflow.com/a/11658976/2460535

Kurze Antwort: Versuchen Sie Bootstrap-Akkordeons und verstehen sich inklusive data-parent='#idofAccordion'

https://jsfiddle.net/curtisweeks/jujL376j/

Answer 2

Wenn Sie wollen weg neben jquery von allem zu bleiben, ist es ziemlich einfach, auf seine eigene:

<div class='collapsible'> 
    <h3>I'm a header</h3> 
    <p style='background:orange; display:none;'>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
</div> 

Dann Ihr Javascript wie folgt aussehen:

$(document).ready(function(){ 
    $('.collapsible h3').click(function(){ 
     $(this).next().slideToggle(); 
    }) 
}); 

Hier ist eine Geige, wo Sie können es ausprobieren: https://jsfiddle.net/403f7k3e/