6

可能重复：
当父元素为 display:none 时显示 HTML 子元素

我在另一个 div 中有一个 div。我已将外部 div 设置为display:none这将使内部 div 也隐藏。如何显示内部 div 并让外部设置为不显示？

CSS：

.hidden {
    width:100px;
    height:100px;
    background-color:red;
    display:none;
}

.display {
    width:50px;
    height:50px;
    background-color: yellow;
    display:block;
}

HTML：

<div class="hidden">
    <div class="display"></div>
</div>

示例：http: //jsfiddle.net/gcyhz/1/

4

5 回答 5

7

实现这一点的最简单替代方法是避免使用display: none和使用transparent颜色：

.hidden {
    width:100px;
    height:100px;
    color: transparent;
    background-color: transparent;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    display:block;
}

JS 小提琴演示。

还有使用visibility而不是的选项display: none：

.hidden {
    width:100px;
    height:100px;
    visibility: hidden;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    visibility: visible;
}

JS 小提琴演示。

但是，这确实会导致visibility: hidden元素占用其在 DOM 中分配的空间，但显然是空的（因此它仍然具有物理尺寸，只是在页面上不可见），尽管子元素可以通过以下方式覆盖该属性声明visibility: visible。

老实说，后一个建议实际上与第一个建议完全相同，它只是避免了某些浏览器可能遇到的问题transparent（color我不记得哪个浏览器有这个问题，但我似乎记得它是一个较旧的IE，但我无法参考任何文件来证实该回忆）。

不幸的是，display: none父元素的声明不能被子元素覆盖，顺便说一句，也不能opacity。

如前所述，最简单的解决方案是简单地将元素移出其父元素，并避免继承问题，而不是试图弥补它。

于 2013-01-30T16:26:05.713 回答
2

不幸的是，这是不可能的。您必须设计一个替代解决方案。（也许当您需要显示时将内部 div 从隐藏的 div 中移出？）

于 2013-01-30T16:22:31.550 回答
1

当您将父元素（元素 A）设置为display:none;它时，它将（在一个非常简单的解释中）从页面中删除该元素，以便其他元素的行为就像元素 A 不在页面上一样。与visibility:hidden;. 将其设置为display:none;必须隐藏该元素及其子元素。

据我所知，没有办法解决。

于 2013-01-30T16:25:02.203 回答
0

jquery.unwrap()似乎可以解决问题：

$(".display").unwrap();

（虽然我有很多数据，在我的情况下最好在服务器端做这个）

于 2013-01-30T17:09:36.120 回答
0

设置display: none一个元素使它看起来好像它不存在于 DOM 中（它不占用视觉空间）。不可能使另一个元素内部的元素display: none实际出现。

于 2013-01-30T16:25:00.953 回答