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

Question

当其父元素为display:none时,是否有任何显示子元素的机制？

情况是隐藏选项卡上的验证错误.我希望显示错误消息,即使该字段是隐藏的.

一个真正简化的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;}

我猜这是不可能的,因为孩子没有上下文,但以防万一???

Answer 1

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

编辑:

这可能是沿着你想要的线,如果你能够从使用切换display到visibility.

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

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

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

Answer 2

不,这是不可能的.您可以将子元素移出其隐藏的父元素,并将其插入标记中的其他位置(例如,通过JavaScript).