Bagaimana untuk Menunjukkan Elemen Anak Tersembunyi Semasa Ibu Bapa Mereka Tersembunyi?

Menunjukkan Elemen Anak Tersembunyi

Dalam situasi tertentu, anda mungkin mahu memaparkan elemen anak walaupun elemen induknya disembunyikan menggunakan paparan CSS : tiada. Ini boleh berguna untuk senario seperti memaparkan ralat pengesahan untuk medan tersembunyi.

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa tingkah laku ini tidak disokong oleh CSS secara semulajadi. Apabila elemen induk disembunyikan, ia mengalih keluar ibu bapa dan anak-anaknya secara berkesan daripada DOM visual.

Penyelesaian Kemungkinan Menggunakan Keterlihatan

Jika menggunakan paparan: tiada yang tidak penting, pendekatan alternatif ialah menggunakan keterlihatan CSS: sebaliknya tersembunyi. Sifat ini menyembunyikan kandungan elemen, termasuk anak-anaknya, tetapi masih menyimpan tempatnya dalam reka letak.

Dengan menggunakan keterlihatan: tersembunyi, anda boleh menyembunyikan elemen induk sambil menjadikan elemen anak yang diingini kelihatan. Teknik ini secara berkesan mengabaikan induk tersembunyi, membenarkan elemen anak dipaparkan.

Contoh Kod

Dalam contoh JSFiddle yang disediakan:

<code class="html"><ul>
    <li>One</li>
    <li class="hide">
        Two
        <ul>
            <li class="reshow">Re Show Me</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li>Three</li>
</ul></code>

<code class="css">.hide {
    visibility: hidden;
}

.reshow {
    visibility: visible;
}</code>

Dalam kes ini, keterlihatan: hidden menyembunyikan elemen induk dengan class hide, tetapi elemen anak dengan class reshow kekal kelihatan. Ini membenarkan mesej ralat pengesahan dipaparkan walaupun medan induk disembunyikan.

Ingat bahawa pendekatan ini mengekalkan ruang elemen induk dalam reka letak, yang mungkin tidak sesuai dalam semua senario.

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