Fundación contraer la lista
Cuando se desea ocultar parte de la pantalla, se puede contraer la lista.
Ejemplos
<Li class = "acordeón de navegación ">
<A Href = "#demo"> simple plegable </ a>
<Div id = "demo" clase = "contenido">
Este tutorial - la ciencia no es sólo la tecnología, sino también un sueño! ! !
</ Div>
</ Li>
</ Ul>
<! - Inicialización Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Ejemplos de analítica
.accordion clases y data-accordion atributo se utiliza para crear un elemento plegable. .accordion-navigation clase utiliza para representar elementos plegables. El contenido real .content de clase (<div class = "contenido" ) y haga clic en el botón para mostrar tampoco.
Hemos añadido a los elementos de la lista <a> elemento de control (Mostrar / Ocultar) El plegable. A continuación, la barra de navegación con el contenido plegable con el mismo ID de contenido (<a href=#demo" 与<div id="demo"> asociados).
Nota: El efecto de plegado debe ser inicializado Fundación JS.
De manera predeterminada, el contenido es plegable oculto. Que podamos en el <div> Anterior .active se permite a la clase predefinidas:
efecto acordeón
efecto acordeón para la ampliación y establecer el contenido plegable.
efecto acordeón mediante el uso de una pluralidad de diferentes anclajes y id para crear un enlace:
Ejemplos
<Li class = "acordeón de navegación ">
<A Href = "#demo"> acordeón ejemplo 1 </ a>
<Id = clase "demo" Div = "contenido activo">
Demo 1 - tutorial - la ciencia no es sólo la tecnología, sino también un sueño! ! !
</ Div>
</ Li>
<Li class = "acordeón de navegación ">
<A Href = "# demo2"> instancia de Accordion 2 </ a>
<Div id = "demo2" clase = "contenido">
Demo 2 - Lorem ipsum dolor sit amet ....
</ Div>
</ Li>
<Li class = "acordeón de navegación ">
<A Href = "# demo3"> instancia de Accordion 3 </ a>
<Div id = "demo3" clase = "contenido">
Demostración 3 - Tutorial - ciencia no es sólo la tecnología, sino también un sueño! ! !
</ Div>
</ Li>
</ Ul>
Trate »
Por defecto, el acordeón tiene un elemento de la lista es abierta. Si desea cerrar todos pueden utilizar data-options="multi_expand:true;" ;" propiedades:
Ejemplos
..
</ Ul>
Trate »