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

"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>

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!