html - 显示父元素时显示 HTML 子元素 :none

Question

有没有什么机制可以在父元素显示时显示子元素:无？

这种情况是隐藏选项卡上的验证错误。我想显示错误消息，即使该字段已隐藏。

这里是一个真正简化的 JSFiddle http://jsfiddle.net/vLYnk/

标记:

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

CSS:

.hide {display: none}
.reshow {display: block !important; position: fixed; top: 0; left: 0;}

我猜这是不可能的，因为 child 没有上下文，但以防万一？？？

Answer 1

不，这是不可能的。 display:none隐藏元素，因此不会显示任何子元素。

编辑:

这可能符合您的要求，如果您能够从使用 display 切换到至 visibility .

.hide {visibility: hidden;}
.reshow {visibility: visible;}

使用此方法可以隐藏父元素的内容但显示特定的 <li>你要。唯一需要注意的是父标记仍会占用屏幕空间。只是不会显示给用户。这可能会也可能不会破坏您正在寻找的布局。

http://jsfiddle.net/vLYnk/2/