當父元素隱藏時，如何在 HTML 中顯示隱藏的子元素？

顯示隱藏的子元素

在HTML 中，將元素的顯示屬性設為「none」可以有效地從視圖中隱藏該元素。但是，當需要顯示隱藏父元素中的子元素時會發生什麼？

原始查詢

使用者在使用巢狀無序列表時遇到此問題。他們希望在子清單項目中顯示驗證錯誤訊息，即使父清單項目已隱藏。傳統觀點認為，這可能是不可能的，因為當其父元素不可見時，子元素缺乏上下文。

解決方案

雖然這是不可能的要在父元素為display: none 時直接顯示子元素，還有一種提供類似功能的替代方法：

使用可見性

而不是設定顯示將父元素的屬性設為“無”，將可見性屬性設為“隱藏”。這將從視圖中刪除父元素，同時仍允許顯示其子元素。

CSS 示例：

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

.reshow {
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
}</code>

標記示例：

<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>

使用此方法，父元素將保持隱藏，但類別為「reshow」的子元素將顯示並位於螢幕的左上角。

其他注意事項

• 父元素仍然會佔用佈局中的空間，即使它是隱藏的。這可能會影響頁面的整體外觀。
• 此方法僅在父元素絕對定位或設定了特定高度和寬度時才有效。
• 不建議使用此技術廣泛使用，因為它可能會導致混亂和可訪問性問題。

以上是當父元素隱藏時，如何在 HTML 中顯示隱藏的子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！