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

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

DDD
DDDasal
2024-11-01 18:01:30224semak imbas

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>

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>

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!

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