父隐藏，但孩子仍然可见（我不希望他们可见）！
好的，我有一种情况需要将一些克隆的DOM元素添加到网页中的父DIV元素。
我有四个父母DIV持有人。 当我将其可见性从可见切换到隐藏时，会发生一些非常奇怪的事情：所有后期页面加载的子项都保持可见！
这是下载源代码的链接： http ： //www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip
以下是第一手查看现象的链接： http ： //www.clarencebowman.com/parent-child-visibility
您将看到的是一个红色框，其中添加了一些洋红色子元素，页面加载后。 页面底部有一个显示/隐藏按钮。
我在父DIV中添加了一个绿色条纹，以显示其子元素确实正确地inheritance了它的可见性。
但是在添加克隆的子元素然后隐藏父DIV之后，克隆的子元素的NONE将消失！
在运行复制脚本之前，我已经尝试将要克隆的子项放在父DIV中…它没有任何区别。
在页面加载后添加的任何子元素似乎都以某种方式丢失了与父DIV元素（红色框）的inheritance链接…..
还有其他人经历过吗？ 是否有一种简单的方法来修复/替换/重新分配孩子的inheritance？
我正在使用jQuery 1.5。
您display: none在父级上使用display: none （这将影响子级），您在父级上使用visibility: none ，并且子级内部具有visibility: visible css属性。 如果您希望子项隐藏，请将它们设置为visible: hidden ，或在父元素上使用display: none 。
所以，正如凯尔指出的那样，你可以使用$('#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意味着它在屏幕上看不到也没有与其他显示/可见元素相关联。
许多其他人提到只使用display: none但是你知道这与使用visibility属性有完全不同的行为。
你可以做的一件事是使用hidden / inherit而不是hidden / visible 。 inherit会导致元素默认可见，除非其父元素之一不可见。 这是你想要的。
在某些情况下，您无法使用此处建议的两种解决方案。
例如display: none将不起作用，因为元素在被隐藏时渲染时需要知道它的宽度和高度。 visibility: hidden如果您无法控制子项并且无法添加visiblity:inherit visibility: hidden可能不起作用visiblity:inherit它们。
在这些情况下，您可以添加opacity: 0 ，例如z-index:-1以便在视觉上隐藏元素（只记得它们仍然存在并且可以点击等）。
从子项中删除visibility：visible属性。 这将解决您的问题。 您可以在父级上使用.hide（）和.show（）（或.toggle（）），而不是将显示设置为none而不是hidden。