且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-11-30 14:51:58

没有这是不可能的。 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/