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?
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 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>
<code class="html"><span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert">Some alarming information here</p></code>
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!