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

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!