显示父元素时显示 HTML 子元素：无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12956937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display HTML child element when parent element is display:none
提问by Andiih
Is there any mechanism to display a child element when its parent element is display: none?
是否有任何机制可以在父元素显示时显示子元素：无？
The situation is a validation error on a hidden tab. I want to surface the error message, even though the field is hidden.
这种情况是隐藏选项卡上的验证错误。我想显示错误消息，即使该字段是隐藏的。
A really simplified JSFiddle of the situation is here http://jsfiddle.net/vLYnk/
一个真正简化的 JSFiddle 情况在这里http://jsfiddle.net/vLYnk/
Markup:
标记：
<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:
CSS：
.hide {display: none}
.reshow {display: block !important; position: fixed; top: 0; left: 0;}
I'm guessing this is impossible as the child would have no context, but just in case???
我猜这是不可能的，因为孩子没有上下文，但以防万一？？？
采纳答案by KP.
No this isn't possible. display:nonehides the element, and thus any child elements will not be displayed.
不，这是不可能的。display:none隐藏元素，因此不会显示任何子元素。
EDIT:
编辑：
This might be along the lines of what you want, if you're able to switch from using displayto visibility.
如果您能够从使用切换display到visibility.
.hide {visibility: hidden;}
.reshow {visibility: visible;}
Using this method you can hide the contents of the parent element but show the specific <li>you want. The only caveat is the parent markup will still take up screen real estate. Just won't be shown to the user. That may or may not break the layout you're looking for.
使用此方法，您可以隐藏父元素的内容，但显示<li>您想要的特定内容。唯一需要注意的是父标记仍将占用屏幕空间。只是不会显示给用户。这可能会也可能不会破坏您正在寻找的布局。
回答by feeela
No, this is not possible. You could instead move the child element out of its hidden parent and insert it somewhere else in the markup (e.g. via JavaScript).
不，这是不可能的。您可以将子元素移出其隐藏的父元素，并将其插入标记中的其他位置（例如，通过 JavaScript）。
回答by Maciej
For specific situations you can use this either:
对于特定情况，您可以使用它：
.hidden-container *{display:none;}
.hidden-container .show-again{display:block}
That will keep .hidden-containerdisplayed, but everything except .show-againcontainer will have display property set to none.
这将保持.hidden-container显示，但除.show-again容器外的所有内容都将显示属性设置为none。
EDIT:
编辑：
note, that it'll reset all display properties in childs of .hidden-containerif declared after their styles.
请注意，它会重置在.hidden-container样式之后声明的if 子项中的所有显示属性。
回答by dave
You could instead of using display: none; to hide your element move it out of the viewport via position: relative/absolute; and left: -9999em; Than give the visible child a position: relative; and left: 9999em;
你可以代替使用 display: none; 要隐藏您的元素，请通过 position:relative/absolute 将其移出视口；左：-9999em；比给可见的孩子一个位置：相对；左：9999em；
The downfall of this solution is, that the "reshown" element is out of the element flow if you used position: absolute. (Not occupying the space it needs and not pushing down following elements) Or that you occupy more space than is actually needed, when using position: relative.
此解决方案的缺点是，如果您使用 position: absolute，“重新显示”元素将不在元素流中。（不占用它需要的空间并且不下推后面的元素）或者当使用 position:relative 时你占用的空间比实际需要的更多。
回答by Максим Грабов
Just add .hide:
只需添加 .hide：
font-size: 0;
margin: 0;
padding: 0;
It will not occupy the space just as display none
它不会像 display none 一样占用空间
回答by Louis Ricci
$('body').append($('.reshow').clone(true));
