父母隐藏但孩子仍然可见（我不希望他们可见）！答案

【问题标题】：parent hidden but children still visible (I don't want them visible)!父母隐藏但孩子仍然可见（我不希望他们可见）！
【发布时间】：2011-07-08 11:43:26
【问题描述】：

好的，所以我遇到了一种情况，我需要将一些克隆的 DOM 元素添加到网页中的父 DIV 元素中。

我有四个这样的父母 DIV 持有人。当我将他们的可见性从可见切换到隐藏时，发生了一件非常奇怪的事情：所有帖子页面加载添加的孩子仍然可见！

这里是下载源代码的链接： http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

这里有一个链接可以直接查看这一现象： http://www.clarencebowman.com/parent-child-visibility

您将看到一个红色框，其中添加了一些洋红色子元素，页面加载后。页面底部有一个显示/隐藏按钮。

我在父 DIV 中添加了一条绿色条纹，以表明它的子元素确实正确地继承了它的可见性。

但是在你添加了克隆的子元素，然后隐藏了父DIV之后，克隆的子元素的NONE消失了！

在运行复制脚本之前，我已经尝试将要克隆的子项放置在父 DIV 中……这没有区别。

在页面加载后添加的任何子元素似乎都以某种方式失去了与父 DIV 元素（红色框）的继承链接.....

还有其他人经历过吗？有没有简单的方法来修复/替换/重新分配孩子的遗产？

我正在使用 jQuery 1.5。

【问题讨论】：

试试display: none;而不是visibility: hidden;
除了 display none 是 css 的属性，其中 hidden 是元素的属性...我不明白为什么它适用于我的大部分代码并且在某些示例中失败...

标签： javascript jquery

【解决方案1】：

许多其他人提到只使用display: none，但您知道这与使用visibility 属性的行为完全不同。

您可以做的一件事是使用hidden / inherit 而不是hidden / visible。 inherit 将导致元素默认可见，除非其父元素之一不可见。这就是你想要的。

【讨论】：

inherit 就是答案！
使用display:none 的公认答案可能适用于某些特定情况（元素布局/流程无关紧要），但此答案是更好的通用解决方案。
这应该是最好的答案！

【解决方案2】：

您没有在父级上使用display: none（这会影响子级），您在父级上使用visibility: hidden，并且在子级中具有visibility: visible css 属性。如果您希望子元素隐藏，请将它们也设置为 visibility: hidden，或者在父元素上使用 display: none。

因此，正如 Kyle 指出的那样，您可以使用 $('#parent_div').toggle();，它可以轻松地将 display: none 应用于 #parent_div。

我会补充一点，visibility 和 display 不一样。例如，如果一个元素是width: 10px，height: 10px，visibility 保留元素的维度空间（它仍然占用width: 10px，height: 10px），而display: none 则完全从父元素（width: 0，height: 0）。 Visibility 表示相对于其他受影响的元素，它仍然在流上以视觉方式表示，只是看不到； display 表示相对于其他显示/可见元素，它在屏幕上既不可见也不表示。

【讨论】：

用 $('#parent_div').toggle(); 切换父元素。它会隐藏孩子们。
@Kyle - 是的，确实如此；它正在使用display: none。在 jQuery 的意义上，这是一个答案，所以我将它添加到我的答案中。谢谢。
@Kyle - 很多个月前我第一次学习 CSS 时，我很难理解 visibility 和 display 之间的区别。所以我可以看到有人可能会被卷入其中。我发现在大多数典型的 html 应用程序中，visibility 的使用频率并不高。

【解决方案3】：

在某些情况下，您不能使用此处建议的两种解决方案。

例如 display: none 不起作用，因为元素在隐藏时渲染时需要知道它的宽度和高度。如果您无法控制孩子并且无法将visiblity:inherit 添加到他们，visibility: hidden 可能无法正常工作。

在这些情况下，您可以添加 opacity: 0 和例如 z-index:-1 以使元素在视觉上隐藏（只要记住它们仍然存在并且可以点击等）。

【讨论】：

【解决方案4】：

从子项中移除 visibility:visible 属性。这将解决您的问题。您可以在父级上使用 .hide() 和 .show()（或 .toggle()）来将显示设置为无而不是隐藏。

【讨论】：