Bagaimana untuk Mencipta Div Boleh Dilipat dengan HTML5 `` dan ``?

Linda Hamilton
Lepaskan: 2024-10-31 02:56:02
asal
483 orang telah melayarinya

How to Create Collapsible Divs with HTML5 `` and ``?

"Cara mencipta div boleh lipat menggunakan HTML dan CSS"

Div boleh lipat biasanya digunakan untuk mempersembahkan kandungan yang dinamik dan teratur pada halaman web . Biasanya, div ini mengandungi pengepala dan badan tersembunyi yang boleh dikembangkan dan diruntuhkan semasa interaksi pengguna. Mencipta div boleh lipat semata-mata dengan CSS boleh menjadi mudah, terutamanya untuk mengekalkan pangkalan kod yang bersih dan mudah.

Kelas Pseudo :target

Pendekatan awal kepada div boleh lipat CSS yang terlibat menggunakan :target pseudo-class, yang mengaktifkan gaya apabila elemen tertentu dipautkan oleh atribut sasaran (cth., ). Walau bagaimanapun, teknik ini memerlukan pengulangan yang banyak untuk berbilang elemen yang boleh dilipat, menghasilkan kod CSS yang menggelembung.

HTML5 dan Teg

Penyelesaian alternatif dan elegan terletak pada HTML5 dan tag. elemen mewakili pengepala boleh togol, manakala elemen merangkum kandungan yang boleh dilipat. Pendekatan ini menghapuskan keperluan untuk JavaScript tersuai atau CSS kompleks, dengan ketara memudahkan proses mencipta div boleh lipat.

Kod Contoh

Berikut ialah contoh untuk menunjukkan penggunaan < ;perincian> dan :

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>
Salin selepas log masuk

Keserasian Pelayar

Manakala dan tag menawarkan penyelesaian yang mudah, keserasian penyemak imbas mesti dipertimbangkan. Ia disokong dalam penyemak imbas moden, termasuk Chrome, Firefox dan Safari; walau bagaimanapun, tidak semua penyemak imbas boleh memaparkannya dengan gelagat yang sama.

Untuk sokongan penyemak imbas yang luas, jika perlu, anda boleh menggunakan polyfill seperti details-polyfill.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Boleh Dilipat dengan HTML5 `` dan ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!