Rumah > hujung hadapan web > tutorial css > Bolehkah Kandungan Boleh Dilipat Dicipta dalam HTML dan CSS Tanpa jQuery?

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

DDD
Lepaskan: 2024-12-06 03:03:09
asal
550 orang telah melayarinya

Can Collapsible Content Be Created in HTML and CSS Without 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>
Salin selepas log masuk

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

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!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan