Cara Membuat Senarai Kandungan Boleh Dilipat dengan CSS Tulen: Bagaimanakah anda menghalang kandungan daripada bersembunyi apabila anda mengklik mana-mana sahaja pada halaman?

DDD
Lepaskan: 2024-11-01 18:01:30
asal
311 orang telah melayarinya

How to Create a Collapsible Content List with Pure CSS: How do you prevent content from hiding when you click anywhere on the page?

Sembunyikan dan Tunjukkan Kandungan Secara Lancar dengan CSS

Untuk mencapai senarai kandungan yang boleh dilipat dengan CSS tulen, kami menghadapi cabaran: kandungan boleh disembunyikan dengan hanya mengklik mana-mana sahaja pada muka surat. Ini menyimpang daripada tingkah laku yang diingini untuk menyembunyikan kandungan hanya apabila pautan "Sembunyikan" diklik.

Penyelesaian CSS

Penyelesaian terletak pada memanfaatkan pemilih :fokus dan ~. Kod CSS yang disemak:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>
Salin selepas log masuk

Penanda HTML

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>
Salin selepas log masuk

Memahami Penyelesaian

  1. Keadaan Fokus: :fokus pemilih menyasarkan elemen yang telah menerima fokus (cth., apabila diklik).
  2. Pemilih Adik Beradik (~): Pemilih ~ sepadan dengan elemen yang merupakan adik beradik elemen yang dipilih.
  3. Paparan Bersyarat: Peraturan CSS menetapkan sifat paparan elemen .alert berdasarkan keadaan fokus elemen .span3 dan .span2.

Apabila Pautan "Sembunyikan Saya" (.span3) menerima fokus, adik-beradiknya, elemen .alert menjadi tersembunyi. Sebaliknya, apabila pautan "Tunjukkan Saya" (.span2) menerima fokus, unsur .alert adik-beradiknya akan kelihatan. Ini memastikan bahawa kandungan disembunyikan atau ditunjukkan hanya apabila pautan yang sepadan diklik, seperti yang dimaksudkan.

Atas ialah kandungan terperinci Cara Membuat Senarai Kandungan Boleh Dilipat dengan CSS Tulen: Bagaimanakah anda menghalang kandungan daripada bersembunyi apabila anda mengklik mana-mana sahaja pada halaman?. 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