Tahukah anda bahawa terdapat penyelesaian HTML5 asli untuk membuat butang baca lebih/kurang akordion dengan mudah untuk menyembunyikan dan mendedahkan kandungan dengan TIADA JavaScript atau CSS. Baca terus untuk mengetahui caranya.
. and Teg HTML5 secara rasminya ialah a elemen widget pendedahan, Tetapi berpasangan dengan Teg HTML5 akan memberi anda a akordion HTML sahaja.
Pengertian tiada JS ATAU CSS diperlukan. Betapa hebatnya!
Berikut ialah contoh yang menunjukkan elemen mudah dengan a and .
Inilah kodanya:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>dan inilah rupanya:
Untuk Lebih Lanjut
Ini ialah akordion HTML5 asli untuk menyembunyikan dan mendedahkan kandungan. Cukup keren, bukan?
Bagaimana ia berfungsi? . tag berfungsi sebagai pembalut untuk elemen yang boleh dibuka atau ditutup. Pengguna perlu mengklik pada label iaitu tag untuk membuka atau menutup elemen.
Bagaimana pula dengan gaya dan tingkah laku?
Gaya
Anda boleh menggunakan penggayaan CSS untuk menyesuaikan penampilan kotak teks dedah. Di bawah memberikan gaya antara muka tab:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Secara lalai, kursor kelihatan seperti anak panah, tetapi jika anda mahu ia menjadi a menunjuk tangan sebaliknya gunakan ini:
details {
cursor: pointer;
}Tingkah Laku
Menetapkan tingkah laku adalah sangat terhad, hanya ada satu perkara yang boleh anda lakukan dan itu ialah membuat teks yang didedahkan terbuka secara lalai.
Untuk memulakan akordion dalam keadaan terbuka, tambahkan Boolean membuka atribut kepada teg:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Untuk Lebih Lanjut
Ini ialah akordion HTML5 asli untuk menyembunyikan dan mendedahkan kandungan. Cukup keren, bukan?
Apakah atribut yang boleh saya gunakan?
Atribut di bawah boleh digunakan untuk teg:
| atribut | nilai | Ringkasan |
|---|---|---|
| membuka | membuka | Lalai adalah tidak buka. |
| id | nilai | Menyediakan pengecam unik. |
| kelas | nama kelas | Berikan nama kelas kepada elemen. |
| gaya | CSS-nilai | Berikan gaya CSS kepada elemen. |
Jadi apakah batasannya? Selalu ada tangkapan, bukan?
Tiada sokongan untuk Internet Explorer
Akordion HTML5 sahaja ini tidak akan berfungsi dalam mana-mana versi Internet Explorer. Jika anda perlu menyokong IE11, anda perlu menggunakan penyelesaian sandaran yang berbeza menggunakan JQuery. Semua pelayar lain menyokong and .
Tiada animasi atau peralihan tersuai
Walaupun anda boleh mengubah suai dan menggayakan penampilan (seperti yang ditunjukkan di atas), anda tidak akan dapat melakukan sebarang animasi atau peralihan yang mendedahkan teks. Jika anda ingin melakukannya, anda memerlukan penyelesaian akordion CSS/JSS yang lain.
Pembaca skrin dan kebolehaksesan
Ini asli HTML5 dan ia *sepatutnya* boleh diakses tetapi telah didapati bahawa teks sebenar yang didedahkan tidak selalu diumumkan dengan betul oleh pembaca skrin.
Rujukan:
