Bagaimana untuk Menunjukkan DIV Anak Semasa Menyembunyikan DIV Induknya?

Memaparkan DIV Anak Tersembunyi Dalam DIV Induk Halimunan

Dalam artikel ini, kami menangani cabaran untuk memaparkan DIV kanak-kanak sambil mengekalkan DIV induknya tersembunyi. Fungsi ini mungkin diperlukan untuk senario di mana anda ingin menunjukkan atau menyembunyikan bahagian tertentu kandungan anda secara bersyarat.

Soalan:

Bagaimanakah kita boleh mendedahkan DIV kanak-kanak semasa menyembunyikan induknya DIV?

Jawapan:

Untuk mencapai ini, ubah suai tetapan keterlihatan kedua-dua DIV induk dan anak menggunakan CSS.

Untuk DIV induk :

• Tetapkan sifat keterlihatan kepada tersembunyi atau runtuh.
• Secara pilihan, anda juga boleh menetapkan sifat lebar, tinggi, jidar dan pelapik kepada 0 untuk meminimumkan kesannya pada reka letak.

Untuk DIV kanak-kanak:

• Tetapkan sifat keterlihatan kepada kelihatan.

Dengan melakukan ini, kanak-kanak DIV akan kelihatan manakala DIV induk kekal tersembunyi.

Pelaksanaan:

Berikut ialah versi semakan kod anda yang menggabungkan cadangan penyelesaian:

.Main-Div {
  visibility: hidden;
}

.Main-Div > .Inner-Div {
  visibility: visible;
}

<div class="Main-Div">
  This is some Text...
  <div class="Inner-Div">
    <a href="#">
      <img src="/image/pic.jpg" />
    </a>
  </div>
  This is some Text...
</div>

Contoh:

Untuk demonstrasi langsung, sila rujuk pautan JSFiddle yang disediakan dalam jawapan asal: http://jsfiddle .net/pread13/h955D/153/

Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan DIV Anak Semasa Menyembunyikan DIV Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!