Bagaimana untuk Memaparkan Elemen Kanak-Kanak Apabila Induknya Disembunyikan dengan `display: none`?

Memaparkan Elemen Anak HTML Apabila Induk Disembunyikan

Apabila elemen induk ditetapkan untuk dipaparkan: tiada, elemen anaknya juga disembunyikan oleh lalai. Walau bagaimanapun, dalam senario tertentu, adalah wajar untuk memaparkan elemen anak walaupun induknya disembunyikan.

Mustahil dengan paparan: tiada

Malangnya, dengan paparan: tiada, tidak mungkin untuk memaparkan elemen kanak-kanak. Ini kerana paparan: tiada satu pun mengalih keluar elemen sepenuhnya daripada aliran dokumen, menjadikan keseluruhan subpokoknya tidak kelihatan.

Alternatif untuk dipaparkan: tiada

Jika paparan: tiada tidak pilihan yang sesuai, pertimbangkan untuk menggunakan kaedah alternatif untuk menyembunyikan elemen induk semasa memaparkan anak:

• keterlihatan: tersembunyi: Tidak seperti paparan: tiada, keterlihatan: tersembunyi menyembunyikan elemen tanpa mengalih keluar ia daripada aliran dokumen. Ini membolehkan elemen kanak-kanak kekal kelihatan.

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

• Kedudukan dan Keratan: Gunakan teknik kedudukan dan guntingan untuk menutup elemen induk sambil memastikan kanak-kanak itu kelihatan dalam bekas induk. Ini amat berguna apabila elemen induk mewakili tab atau bahagian yang boleh disembunyikan atau ditunjukkan.

<code class="css">.hide {
  position: absolute;
  overflow: hidden;
  height: 0;
}
.reshow {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Elemen Kanak-Kanak Apabila Induknya Disembunyikan dengan `display: none`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!