Rumah > Artikel > hujung hadapan web > 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
Penyelesaian alternatif dan elegan terletak pada HTML5
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
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!