显示父元素时显示HTML子元素：none [英] Display HTML child element when parent element is display:none

问题描述

当显示子元素的父元素时，是否有任何机制显示：none？

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

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

标记：

 < ul> 
< li>一个< / li> 
< li class =hide> 
 Two 
< ul> 
< li class =reshow>重新显示我< / li> 
< li>内部2< / li> 
< / ul> 
< / li> 
< li>三< / li> 
< / ul> 
  

CSS：

 code> .hide {display：none} 
 .reshow {display：block！important;位置：固定; top：0; left：0;} 
  

我猜想这是不可能的，因为孩子没有上下文，

解决方案

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

编辑：

这可能是你想要的，如果您能够从使用显示切换到可见性。

  .hide {visibility：hidden;} 
 .reshow {visibility：visible;} 
 <使用此方法，您可以隐藏父元素的内容，但显示特定的< li>  / code>你想要的。唯一的警告是父标记仍然会占用屏幕的房地产。只是不会显示给用户。 
 
 
 
  http： //jsfiddle.net/vLYnk/2/  
 
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/

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:
.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???
解决方案
No this isn't possible. display:none hides the element, and thus any child elements will not be displayed. 

EDIT:

This might be along the lines of what you want, if you're able to switch from using display to 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.

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

                        
这篇关于显示父元素时显示HTML子元素：none的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！