如何在父元素隐藏时显示隐藏的子元素？

显示隐藏的子元素

在某些情况下，即使使用 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中文网其他相关文章！