Bagaimanakah Saya Boleh Menunjukkan Div Kanak-Kanak Sambil Menyorokkan Div Induknya?

Menunjukkan Div Kanak-kanak dalam Div Induk Tersembunyi

Dalam senario pengaturcaraan tertentu, seseorang mungkin menghadapi situasi di mana Div Kanak-kanak perlu dipaparkan dengan jelas manakala Div Induk kekal tersembunyi. Ini boleh dicapai menggunakan sifat CSS tertentu.

Pecahan Kod:

Kod HTML yang disediakan termasuk Div ​​Induk dengan kelas "Div Utama" dan Anak Div bersarang di dalamnya dipanggil "Inner-Div." Pada mulanya, "Main-Div" disembunyikan menggunakan sifat CSS "display:none."

Untuk menjadikan "Inner-Div" kelihatan sambil mengekalkan "Main-Div" tersembunyi, sifat CSS berikut adalah digunakan:

1. keterlihatan: boleh dilihat untuk Div ​​Kanak-kanak: Ini memastikan bahawa "Div Dalaman" menjadi kelihatan, tanpa mengira keterlihatan induknya.
2. keterlihatan: tersembunyi untuk Div ​​Induk: Ini menyembunyikan "Div Utama" daripada paparan sambil masih membenarkan elemen anaknya dipaparkan.
3. lebar: 0, tinggi: 0, jidar: 0 dan padding: 0 untuk Induk Div: Sifat CSS tambahan ini meruntuhkan "Div Utama" kepada saiz sifar, menjadikannya tidak kelihatan dengan berkesan tanpa menjejaskan ruang yang didudukinya pada halaman.

Contoh:

.parent>.child {
    visibility: visible;
}

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

Dengan melaksanakan sifat CSS ini, adalah mungkin untuk mempunyai Child Div yang boleh dilihat dalam tersembunyi Div Induk, seperti yang ditunjukkan dalam contoh JSFiddle yang disediakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menunjukkan Div Kanak-Kanak Sambil Menyorokkan Div Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!