Bagaimana untuk Mencipta Berbilang Div Boleh Dilipat dengan CSS Minimal?

Css Tulen Runtuh dan Kembangkan Div

Menyesuaikan Berbilang Div Boleh Dilipat dengan CSS Minimum

Isu yang dihadapi ialah mencipta berbilang div yang boleh dilipat pada satu halaman tanpa membebankan kod CSS dengan pemilih yang berlebihan. Dalam kes ini, kod yang disediakan menggunakan pseudoclass :target, tetapi ia memerlukan pemilih unik untuk setiap soalan.

Penyelesaian: Menerima dan Tag

Pendekatan yang lebih cekap ialah dengan melaksanakan HTML5 dan tag. Teg ini direka khusus untuk mencipta elemen kandungan boleh lipat dan boleh dikembangkan.

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

Keserasian Penyemak Imbas

Sokongan penyemak imbas untuk dan tag adalah baik tetapi berbeza-beza. Pelayar berasaskan WebKit memberikan hasil yang terbaik. Penyemak imbas lain mungkin lalai untuk memaparkan semua kandungan boleh lipat, tetapi anda boleh mempertimbangkan pilihan sandaran menggunakan kaedah sembunyi/tunjuk seperti yang diterangkan dalam kod asal.

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