当父元素隐藏时，如何在 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中文网其他相关文章！