59

当其父元素为 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;}

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

4

6 回答 6

62

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

编辑：

display如果您能够从 using 切换到，这可能与您想要的一致visibility。

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

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

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

于 2012-10-18T14:27:59.283 回答
5

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

于 2012-10-18T14:28:22.340 回答
4

对于特定情况，您可以使用它：

.hidden-container *{display:none;}
.hidden-container .show-again{display:block}

这将继续.hidden-container显示，但除了.show-again容器之外的所有内容都将显示属性设置为none.

jsFiddle

编辑：

请注意，它将重置子元素中的所有显示属性，.hidden-container如果在其样式之后声明。

于 2014-04-07T16:05:53.167 回答
3

您可以代替使用 display: none; 隐藏你的元素通过位置移出视口：相对/绝对；左：-9999em；比给可见的孩子一个位置：相对；左：9999em；

此解决方案的缺点是，如果您使用 position: absolute，“重新显示”的元素将不在元素流中。（不占用它需要的空间并且不向下推以下元素）或者在使用位置时占用比实际需要的空间更多的空间：相对。

http://jsfiddle.net/vLYnk/3/

于 2012-10-18T14:38:32.150 回答
3

只需添加 .hide：

font-size: 0;
margin: 0;
padding: 0;

它不会像 display none 一样占用空间

于 2019-09-09T19:23:58.357 回答
1 
$('body').append($('.reshow').clone(true));
于 2012-10-18T14:32:03.790 回答