Fundação recolher a lista
Quando você quiser esconder parte da tela, você pode reduzir a lista.
Exemplos
<Li class = "acordeão-navegação ">
<A Href = "#demo"> simples dobrável </ a>
<Div id = "demonstração" class = "content">
Este tutorial - a ciência não é apenas tecnologia, mas também um sonho! ! !
</ Div>
</ Li>
</ Ul>
<! - Inicialização Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
Exemplos de analítico
.accordion classes e data-accordion atributo é usado para criar um elemento desmontável. .accordion-navigation classe usada para processar elementos dobráveis. O real conteúdo .content classe (<div class = "content" ) e clique no botão para exibir qualquer um.
Nós adicionamos aos itens da lista <a> elemento de controle (mostrar / ocultar) o desmontável. Em seguida, ancorar ligação com o conteúdo dobrável com o mesmo ID de conteúdo (<a href=#demo" 与<div id="demo"> associado).
Nota: O efeito de dobradura precisa ser inicializado Fundação JS.
Por padrão, o conteúdo dobrável está escondido. Podemos na <div> Anterior .active classe é permitido para o padrão de exibição:
efeito sanfona
efeito sanfona para a extensão e definir o conteúdo desmontável.
efeito sanfona usando uma pluralidade de diferentes âncoras e id para criar um link:
Exemplos
<Li class = "acordeão-navegação ">
<A Href = "#demo"> acordeão exemplo 1 </ a>
<Div id = class "demonstração" = "conteúdo ativo">
Demo 1 - tutorial - a ciência não é apenas tecnologia, mas também um sonho! ! !
</ Div>
</ Li>
<Li class = "acordeão-navegação ">
<A Href = "# demo2"> instância acordeão 2 </ a>
<Div id = "demo2" class = "content">
Demo 2 - Lorem ipsum dolor sit amet ....
</ Div>
</ Li>
<Li class = "acordeão-navegação ">
<A Href = "# demo3"> instância acordeão 3 </ a>
<Div id = "demo3" class = "content">
Demo 3 - tutorial - a ciência não é apenas tecnologia, mas também um sonho! ! !
</ Div>
</ Li>
</ Ul>
tente »
Por padrão, o acordeão tem um item da lista é aberta. Se você quiser fechar todos podem usar data-options="multi_expand:true;" ;" propriedades:
Exemplos
..
</ Ul>
tente »