Bagaimana untuk Menunjukkan Elemen Anak Apabila Elemen Induknya Tersembunyi?

Cara Mendedahkan Elemen Kanak-kanak Dalam Elemen Induk Tersembunyi

Dalam bidang pembangunan web, selalunya wajar untuk memaparkan elemen tertentu semasa menyembunyikan orang lain, terutamanya dalam struktur bersarang. Cabaran timbul apabila cuba menunjukkan elemen anak dalam elemen induk tersembunyi.

The Soalan:

如何在一个隐藏的父元素内显示一个子元素？实现这个功能是可能的嗎？

示例代码：

<style>
  .Main-Div{
   display:none;
}
</style>

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

The Penyelesaian:

Untuk mencapai ini, anda boleh menggunakan teknik berikut:

1. Sembunyikan Induk: Tetapkan keterlihatan elemen induk kepada " tersembunyi" atau "runtuh." Ini secara berkesan akan menyembunyikan keseluruhan elemen induk, termasuk semua anak-anaknya.
2. Temui Anak: Seterusnya, tetapkan keterlihatan elemen anak kepada "kelihatan". Ini akan mengatasi keadaan tersembunyi ibu bapa dan mendedahkan elemen anak tertentu.

Lembaran Gaya Diubah Suai:

.parent>.child
{
    visibility: visible;
}

.parent
{
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

Contoh Lengkap:

Anda boleh mendapatkan demonstrasi langsung penyelesaian ini di URL berikut: http://jsfiddle.net/pread13/h955D/153/

Nota Tambahan:

Dengan bantuan @n1kkou, penyelesaiannya telah diperhalusi lagi untuk mencegah isu ruang atau margin yang tidak perlu sambil menyembunyikan elemen induk.

Dengan melaksanakan ini langkah, anda boleh memaparkan elemen kanak-kanak dengan berkesan dalam elemen induk tersembunyi, memberikan fleksibiliti yang lebih besar untuk reka bentuk halaman web anda.

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