Stiftung kollabieren die Liste
Wenn Sie einen Teil der Anzeige ausblenden möchten, können Sie die Liste auszublenden.
Beispiele
<Li class = "Akkordeon-Navigation ">
<A Href = "#demo"> Einfach zusammenklappbare </ a>
<Div id = "Demo" class = "content">
Dieses Tutorial - Wissenschaft ist nicht nur Technik, sondern auch ein Traum! ! !
</ Div>
</ Li>
</ Ul>
<! - Initialisierung Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Beispiele für analytische
.accordion Klassen und data-accordion - Attribut wird verwendet , um ein zusammenklappbares Element zu schaffen. .accordion-navigation Klasse verwendet zusammenklappbar Elemente zu machen. Der tatsächliche Inhalt .content Klasse (<div class = "content" ) und klicken Sie auf die Schaltfläche entweder anzuzeigen.
Wir haben auf die Listenelemente <a> Element (Ein- / Ausblenden) der zusammenklappbare zu steuern. Dann verankern Verbindung mit klappbaren Inhalt mit dem gleichen Inhalt id (<a href=#demo" 与<div id="demo"> verbunden ist).
Hinweis: Die Faltung Effekt Foundation JS initialisiert werden muss.
Standardmäßig ist der zusammenklappbare Inhalt versteckt. Wir können in der <div> Zurück .active Klasse darf zur Standardanzeige:
Akkordeon-Effekt
Akkordeon-Effekt für die Erweiterung und stellen Sie den zusammenklappbaren Inhalt.
Akkordeon-Effekt, der durch eine Vielzahl von unterschiedlichen Dübeln und id einen Link zu erstellen:
Beispiele
<Li class = "Akkordeon-Navigation ">
<A Href = "#demo"> Akkordeon Beispiel 1 </ a>
<Div id = "Demo" class = "content aktiv">
Demo 1 - Tutorial - Wissenschaft ist nicht nur Technik, sondern auch ein Traum! ! !
</ Div>
</ Li>
<Li class = "Akkordeon-Navigation ">
<A Href = "# demo2"> Akkordeon Beispiel 2 </ a>
<Div id = "demo2" class = "content">
Demo 2 - Lorem ipsum dolor sit amet ....
</ Div>
</ Li>
<Li class = "Akkordeon-Navigation ">
<A Href = "# demo3"> Akkordeon Beispiel 3 </ a>
<Div id = "demo3" class = "content">
Demo 3 - Tutorial - Wissenschaft ist nicht nur Technik, sondern auch ein Traum! ! !
</ Div>
</ Li>
</ Ul>
Versuchen »
Standardmäßig hat das Akkordeon ein Listenelement geöffnet ist. Wenn Sie schließen möchten können alle verwenden data-options="multi_expand:true;" ;" Eigenschaften:
Beispiele
..
</ Ul>
Versuchen »