Yayasan runtuh daftar
Bila Anda ingin menyembunyikan bagian dari layar, Anda dapat runtuh daftar.
contoh
<Class Li = "akordeon-navigasi ">
<A Href = "#demo"> Sederhana dilipat </ a>
<Div id = "demo" class = "content">
Tutorial ini - ilmu tidak hanya teknologi, tetapi juga mimpi! ! !
</ Div>
</ Li>
</ Ul>
<! - Inisialisasi Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
Contoh analisis
.accordion kelas dan data-accordion atribut yang digunakan untuk membuat elemen dilipat. .accordion-navigation kelas yang digunakan untuk membuat elemen dilipat. Sebenarnya konten .content kelas (<div class = "content" ) dan klik tombol untuk menampilkan baik.
Kami ditambahkan ke daftar item <a> elemen untuk mengontrol (show / hide) dilipat The. Kemudian jangkar hubungan dengan konten dilipat dengan id konten yang sama (<a href=#demo" 与<div id="demo"> terkait).
Catatan: Efek lipat perlu diinisialisasi Yayasan JS.
Secara default, isi dilipat tersembunyi. Kita bisa di <div> Sebelumnya .active kelas diperbolehkan ke default tampilan:
efek Accordion
Efek Accordion untuk perpanjangan dan mengatur konten dilipat.
Efek Accordion dengan menggunakan sejumlah jangkar yang berbeda dan id untuk membuat link:
contoh
<Class Li = "akordeon-navigasi ">
<A Href = "#demo"> Accordion misalnya 1 </ a>
<Div id = "demo" class = "konten aktif">
Demo 1 - tutorial - ilmu tidak hanya teknologi, tetapi juga mimpi! ! !
</ Div>
</ Li>
<Class Li = "akordeon-navigasi ">
<A Href = "# demo2"> Accordion misalnya 2 </ a>
<Div id = "demo2" class = "content">
Demo 2 - Lorem ipsum dolor sit amet ....
</ Div>
</ Li>
<Class Li = "akordeon-navigasi ">
<A Href = "# demo3"> Accordion misalnya 3 </ a>
<Div id = "demo3" class = "content">
Demo 3 - tutorial - ilmu tidak hanya teknologi, tetapi juga mimpi! ! !
</ Div>
</ Li>
</ Ul>
Coba »
Secara default, akordeon memiliki item daftar terbuka. Jika Anda ingin menutup semua dapat menggunakan data-options="multi_expand:true;" ;" sifat: