Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta DIV Boleh Dilipat dengan HTML dan CSS Tulen?

Bagaimanakah Saya Boleh Mencipta DIV Boleh Dilipat dengan HTML dan CSS Tulen?

Linda Hamilton
Linda Hamiltonasal
2024-12-06 15:02:121032semak imbas

How Can I Create Collapsible DIVs with Pure HTML and CSS?

DIV Boleh Dilipat Menggunakan HTML, CSS

Mencari kaedah untuk mencipta elemen DIV yang boleh disembunyikan dan boleh dilipat tanpa bergantung pada jQuery? Isu ini sering timbul dalam reka bentuk tapak web mudah alih, terutamanya apabila akses luar talian adalah penting. Menggunakan HTML dan CSS tulen, mencapai fungsi ini adalah mungkin.

Penyelesaian:

Menggunakan HTML5; dan tags ialah penyelesaian yang berdaya maju:

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

Pendekatan ini memanfaatkan kefungsian asli HTML5 tanpa memerlukan penggayaan JavaScript atau CSS tambahan. teg mewakili bekas yang boleh dilipat, manakala tag mentakrifkan pengepala interaktifnya. Mengklik pada teg menogol keterlihatan kandungan dalam tag.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta DIV Boleh Dilipat dengan HTML dan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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