Bolehkah Kandungan Boleh Dilipat Dicipta dalam HTML dan CSS Tanpa jQuery?

Mencipta Kandungan Boleh Dilipat dalam HTML dan CSS Tanpa jQuery

Ramai pereka bentuk berusaha untuk mencipta kandungan boleh lipat seperti yang dipamerkan dalam tema jQuery Mobile. Walau bagaimanapun, ia patut dipertimbangkan sama ada menggunakan jQuery diperlukan untuk fungsi tersebut. Artikel ini meneroka kemungkinan untuk mencapai ini menggunakan HTML dan CSS tulen, memberikan beberapa contoh untuk menunjukkan kebolehlaksanaannya.

Menggunakan HTML5; dan Teg

HTML5 memperkenalkan dan tag yang direka khusus untuk tujuan ini. Teg ini tidak memerlukan penggayaan atau skrip tambahan.

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

Menggunakan Penggayaan CSS Tersuai

Untuk kawalan yang lebih terperinci ke atas penampilan dan tingkah laku kandungan boleh lipat, CSS tersuai boleh dilaksanakan.

details {
  border: 1px solid black;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  color: green;
}

details[open] p {
  display: block;
}

Dalam contoh ini, sempadan dan pelapik bahagian boleh lipat ditakrifkan, manakala kursor bertukar kepada penunjuk apabila melayang di atas ringkasan. Atribut terbuka digunakan untuk menukar warna ringkasan dan menunjukkan/menyembunyikan kandungan.

Contoh Tambahan

Contoh berikut mempamerkan pendekatan alternatif:

• Menggunakan Butang Radio: Mencipta butang radio yang berasingan untuk setiap bahagian yang boleh dilipat membolehkan kelakuan runtuh dan kembangkan yang lebih "tradisional".
• JavaScript tersuai tanpa jQuery: Menggunakan fungsi JavaScript sebaris untuk menogol keterlihatan bahagian boleh lipat menghilangkan keperluan untuk jQuery, tetapi masih menambah skrip luaran.
• Menggunakan Vue.js: Memanfaatkan rangka kerja JavaScript yang ringan seperti Vue.js menyediakan pendekatan berstruktur untuk mengurus keadaan dan kereaktifan, menjadikannya sesuai untuk kandungan boleh lipat yang lebih kompleks.
• Kajang CSS dengan Tipografi Bendalir: Teknik ini menggunakan CSS tulen dengan tipografi cecair untuk mensimulasikan kesan runtuh dan mengembang dengan awning yang boleh disesuaikan agar sesuai dengan skrin yang berbeza saiz.

Atas ialah kandungan terperinci Bolehkah Kandungan Boleh Dilipat Dicipta dalam HTML dan CSS Tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!