父隐藏，但孩子仍然可见（我不希望他们可见）！ [英] parent hidden but children still visible (I don't want them visible)!

问题描述

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

Okay, so I had a situation where I needed to add some cloned DOM elements to a parent DIV element in a web page.

我有四个这样的父母DIV持有人。当我将其可见性从可见切换到隐藏时，会发生一些非常奇怪的事情：所有后期页面加载的子项都保持可见！

I had four of these parent DIV holders. When I make their visibility switch from visible to hidden, a really weird things happens: ALL of the post page-load added children REMAIN visible!

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

Here is a link to download the source code: http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

这是一个直接查看现象的链接：
http://www.clarencebowman.com/parent-child-visibility

and here is a link to view the phenomenon first-hand: http://www.clarencebowman.com/parent-child-visibility

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

What you will see is a red box with some magenta child elements added to it, post page-load. There is a show/hide button at the bottom of the page.

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

I added a green stripe in the parent DIV to show that its child elements do indeed inherit its visibility properly.

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

But after you add the cloned child elements and then hide the parent DIV, NONE of the cloned child elements disappears!

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

I have already tried placing the child to be cloned inside the parent DIV before running the duplicating script... it makes no difference.

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

Any child elements that are added post page-load seem to have somehow lost their inheritance link with the parent DIV element (the red box).....

其他人有这样的经历吗？是否有一种简单的方法来修复/替换/重新分配子项的继承？

Anyone else experience this? Is there a simple way to repair/replace/re-assign the children's inheritance?

我使用的是jQuery 1.5。

I am using jQuery 1.5.

推荐答案

您没有在父级上使用 display：none （这会影响孩子），您正在使用<父项上的code> visibility：none ，并且子项中有 visibility：visible css属性。如果您希望孩子隐藏，可以将它们设置为 visible：hidden ，或使用 display：none on父元素。

You're not using display: none on the parent (which would affect the children), you're using visibility: none on the parent, and within the children have a visibility: visible css attribute. If you want the children to hide, either set them to be visible: hidden too, or use display: none on the parent element.

因此，正如Kyle指出的那样，你可以使用 $（'＃parent_div'）。toggle（）; ，可轻松将 display：none 应用于 #parent_div 。

So, as Kyle pointed out, you can use $('#parent_div').toggle();, which will easily apply a display: none to #parent_div.

我只是添加可见性和 display 不一样。例如，如果元素是 width：10px ， height：10px ，可见性保留元素的维度空间（它仍占用 width：10px ， height：10px ），而 display：none 从父元素中完全删除元素的尺寸（ width：0 ，身高：0 ）。 可见性意味着它仍然可视地表示与其他受影响元素相关的流量，它只是没有看到; display 表示屏幕上没有显示与其他显示/可见元素相关的信息。

I'll just add that visibility and display are not the same. For example, if an element is width: 10px, height: 10px, visibility retains the element's dimensional space (it still takes up width: 10px, height: 10px), whereas display: none completely removes the dimensions of the element from the parent element (width: 0, height: 0). Visibility means it's still represented visually on flow in relation to other affected elements, it's just not seen; display means it's not seen nor represented on the screen in relation to other displayed/visible elements.

这篇关于父隐藏，但孩子仍然可见（我不希望他们可见）！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！