Fondazione comprimere l'elenco
Quando si desidera nascondere parte del display, è possibile comprimere l'elenco.
Esempi
<Li class = "accordion-navigazione ">
<A Href = "#demo"> semplice pieghevole </ a>
<Div id = "demo" class = "content">
Questo tutorial - la scienza non è solo tecnologia, ma anche un sogno! ! !
</ Div>
</ Li>
</ Ul>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »
Esempi di analitica
.accordion classi e data-accordion attributo viene utilizzato per creare un elemento comprimibile. .accordion-navigation di classe utilizzata per il rendering elementi pieghevoli. L'attuale contenuto .content classe (<div class = "content" ) e fare clic sul pulsante per visualizzare uno.
Abbiamo aggiunto alle voci di elenco <a> elemento da controllare (mostra / nascondi) Il pieghevole. Poi ancorare legame con contenuti pieghevole con lo stesso ID contenuto (<a href=#demo" 与<div id="demo"> associati).
Nota: L'effetto di piegatura deve essere inizializzato Fondazione JS.
Per impostazione predefinita, il contenuto pieghevole è nascosto. Possiamo nella <div> precedente .active classe è permesso di visualizzazione di default:
effetto Accordion
effetto di fisarmonica per l'estensione e impostare il contenuto pieghevole.
effetto Accordion utilizzando una pluralità di differenti ancore e id per creare un collegamento:
Esempi
<Li class = "accordion-navigazione ">
<A Href = "#demo"> Accordion esempio 1 </ a>
<Div id = "demo" class = "contenuto attivo">
Demo 1 - Tutorial - la scienza non è solo tecnologia, ma anche un sogno! ! !
</ Div>
</ Li>
<Li class = "accordion-navigazione ">
<A Href = "# demo2"> esempio Accordion 2 </ a>
<Div id = "demo2" class = "content">
Demo 2 - Lorem ipsum dolor sit amet ....
</ Div>
</ Li>
<Li class = "accordion-navigazione ">
<A Href = "# demo3"> esempio Accordion 3 </ a>
<Div id = "demo3" class = "content">
Demo 3 - Tutorial - la scienza non è solo tecnologia, ma anche un sogno! ! !
</ Div>
</ Li>
</ Ul>
Prova »
Per impostazione predefinita, la fisarmonica ha una voce di elenco è aperto. Se si desidera chiudere tutti possono utilizzare data-options="multi_expand:true;" ;" proprietà:
Esempi
..
</ Ul>
Prova »