Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Div Boleh Dilipat dengan CSS Tulen menggunakan dan ?

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

Barbara Streisand
Lepaskan: 2024-11-01 00:49:02
asal
913 orang telah melayarinya

How to Create a Collapsible Div with Pure CSS using  and ?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan