Bagaimana untuk Mencipta Div Boleh Dilipat dengan CSS Tulen menggunakan dan ?

Penyelesaian Div Dilipat CSS Tulen

Dalam pertanyaan ini, pengguna mendapatkan panduan tentang mencipta div boleh lipat CSS tulen, sama seperti contoh dalam jsfiddle yang disediakan. Walau bagaimanapun, mereka bertujuan untuk meminimumkan kod CSS dan mengelak daripada menulis banyak pemilih untuk berbilang pasangan soalan-jawapan.

Tidak seperti pendekatan asal berdasarkan pseudoclass :target, pertanyaan ini memperkenalkan dan tag HTML. Teg ini direka bentuk secara eksklusif untuk mencipta kandungan boleh lipat.

Menggunakan dan

• : Mentakrifkan teks ringkasan yang pada mulanya kelihatan sebelum mengembangkan div.
• : Melampirkan kandungan boleh lipat yang disembunyikan sehingga ringkasan diklik.

Contoh:

<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 untuk dan tag adalah pelbagai. Penyemak imbas berasaskan webkit, seperti Chrome dan Safari, menawarkan sokongan optimum untuk fungsi ini. Penyemak imbas lain mungkin mempamerkan gelagat lalai, seperti menunjukkan semua kandungan boleh lipat.

Kaedah Saling Balik

Untuk penyemak imbas yang tidak menyokong sepenuhnya dan tag, kaedah sandaran menggunakan CSS boleh dipertimbangkan. Ini melibatkan penggunaan gabungan pseudoclass :target dan sifat paparan untuk menogol keterlihatan kandungan boleh lipat.

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