如何在父元素隱藏時顯示隱藏的子元素？

顯示隱藏的子元素

在某些情況下，即使使用CSS 顯示隱藏其父元素，您也可能想要顯示子元素： 沒有任何。這對於顯示隱藏欄位的驗證錯誤等場景很有用。

但是，要注意的是，CSS 本身並不支援此行為。當父元素被隱藏時，它會有效地從視覺 DOM 中刪除父元素及其子元素。

使用可見性的可能解決方案

如果使用 display: none 則不是至關重要的是，另一種方法是使用 CSSvisibility:hidden 來代替。此屬性隱藏元素的內容，包括其子元素，但仍保留它們在佈局中的位置。

透過使用visibility:hidden，您可以隱藏父元素，同時使所需的子元素可見。此技術有效地忽略隱藏的父元素，從而允許顯示子元素。

程式碼範例

在提供的JSFiddle 範例：

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

在這種情況下，visibility:hidden 會隱藏類別hide 的父元素，但類別reshow 的子元素仍然可見。即使父字段被隱藏，這也允許顯示驗證錯誤訊息。

請記住，這種方法保留了佈局中父元素的空間，這在所有情況下可能並不理想。

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