Bagaimana untuk Mencipta Berbilang Div Boleh Dilipat dalam CSS Tulen Tanpa Kod Luas?

Pure CSS Collapsible Divs: Meminimumkan Kod untuk Pelbagai Elemen

Soalan:

Dalam CSS tulen, bagaimana anda boleh mencipta berbilang elemen div boleh lipat tanpa menulis kod yang meluas untuk setiap elemen?

Konteks:

Kod yang disediakan menggunakan pseudoclass :target untuk meruntuhkan dan mengembangkan satu div. Walau bagaimanapun, keperluan untuk mencipta banyak elemen div yang serupa memerlukan sejumlah besar CSS.

Penyelesaian:

Pendekatan alternatif ialah menggunakan dan Teg HTML, yang direka khusus untuk fungsi ini.

Butiran:

• : Mengandungi teks yang muncul sebelum mengembangkan butiran.
• : Melampirkan kandungan terperinci yang pada mulanya disembunyikan.

Dengan meletakkan teg ini, anda boleh membuat bahagian yang boleh dikembangkan dengan mudah tanpa sebarang CSS:

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>

Sokongan Penyemak Imbas:

Sokongan penyemak imbas berbeza-beza. Webkit (cth., Safari, Chrome) menawarkan hasil terbaik. Dalam penyemak imbas lain, butiran mungkin sentiasa ditunjukkan.

Fallback:

Jika dan teg tidak disokong, pertimbangkan untuk menggunakan kaedah sembunyikan/tunjukkan dengan pemilih CSS yang meluas.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Berbilang Div Boleh Dilipat dalam CSS Tulen Tanpa Kod Luas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!