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

Answer 3

你可以代替使用display：none;隐藏你的元素通过position：relative / absolute;将它移出视口并离开：-9999em; 比给可见孩子一个位置：相对;并离开：9999em;

这个解决方案的缺点是，如果使用position：absolute，则“reshown”元素不在元素流中。（不占用它所需的空间而不是按下后面的元素）或者当你使用position：relative。时，你占用的空间比实际需要的多。

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

Answer 4

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

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

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

jsFiddle

编辑：

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

Answer 5

$('body').append($('.reshow').clone(true));

Answer 6

只需添加.hide：

NIOUtils

它不会像没有显示那样占据空间

Answer 7

您也可以使用jQuery隐藏和显示元素。看那个例子： hide and show

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

7 个答案: