Question

只是想知道是否可以使用css或jQuery隐藏父级和可见子级，

基本上在某些特定页面上，即使父母被隐藏，我也试图让子元素可见，

var bodyClass = jQuery('body').attr('class');
    //alert (bodyClass);
    var searchTerm = 'category-mens';
    var searchTerm2 = 'category-ladies';
    if((bodyClass.search(searchTerm) || bodyClass.search(searchTerm2)) != -1) {
        jQuery('.nav-container ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.first a span').css({
             'display':'block',
             'position':'absolute',
             'top':'500px',
             'left':'500px'
        }); 
    }

目前它不起作用因为li.level2被隐藏了。

感谢您的帮助。

Answer 1

说你有类似的东西：

<div style="visibility:hidden">
     <div style="visibility:visible">
          This is some sample text
     </div>
</div>

您不会看到示例文本。因为如果隐藏了父级，则即使明确声明子级可见，也会隐藏该子级。

就像哈利波特穿着一件衬衫一样，并且他穿着不可思议的外套，即使衬衫可见，但由于它在斗篷里面，它仍然无法看到。

修改

有人指出这个答案已经过时了。当它被回答时，它已经在IE和Chrome下进行了测试和工作，并且它如上所述在那时起作用。（老实说，我甚至不能告诉你我在那个时候测试过它的版本。

此时对当前浏览器有效的最新答案可以在parent hidden but children still visible找到。正如在目标问题/答案中指出的那样......你可能不希望看到...... display：hidden很可能是最好的选择，考虑到当你.show（）/。hide（）/。toggle（）它更新显示而不是可见性时，它会帮助你保持一致。

Answer 2

接受的答案是错误的。规范明确指出：

The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'。

来源：http://www.w3.org/wiki/CSS/Properties/visibility

所以，是的。如果使用visibility属性隐藏父级，则可以使子级可见。在我看来，这是一种错误的行为 - 根本不符合逻辑。但这些都是规格。 display属性的行为方式不同。

Answer 3

可以这样做，但是要求你将元素的位置设置为绝对值。可能需要使用显示类型进行更多调整。如果您能提供样品，我可能会帮助您更多。

Answer 4

是的，你可以显示子元素，即使隐藏了父元素，如果你使用“visibility”-attribute（这不适用于“display”-attribute）。问题是，当“visibility”属性的值为“hidden”时，该元素仍然占用与“可见”时相同的空间。您可以将“隐藏”元素的高度设置为0，但子元素的定位将成为问题。如果隐藏父元素并将高度设置为0，则还必须隐藏所有父级兄弟

HTML：

<ul>
    <li class="hide">Item 1</li>
    <li class="hide">
        Item 2
        <ul>
            <li class="show">Item 2.1</li>
            <li class="show">Item 2.2
                <ul>
                    <li class="hide">Item 2.2.1</li>
                    <li class="show">Item 2.2.2</li>
                    <li class="hide">Item 2.2.3</li>                     
                </ul>
            </li>
            <li class="show">Item 2.3</li>        
        </ul>
    </li>
    <li class="hide">Item 3</li>
</ul>

CSS：

.hide {visibility: hidden; height: 0}
.show {visibility: visible; }

定位问题见以下示例：

http://jsfiddle.net/DWwZg/2/

如果父项被隐藏，是否可以使子元素可见

4 个答案: