Javascript 父隐藏但子仍然可见（我不希望它们可见）！

parent hidden but children still visible (I don't want them visible)!

提问by exoboy

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

好的，所以我遇到了需要将一些克隆的 DOM 元素添加到网页中的父 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!

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

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/parent-child-visibility.zip

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

这是一个可以直接查看该现象的链接：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.

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

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

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

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).....

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

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

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

I am using jQuery 1.5.

我正在使用 jQuery 1.5。

回答by Jared Farrish

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

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

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

因此，正如凯尔所指出的，您可以使用$('#parent_div').toggle();，这将很容易将 adisplay: none应用于#parent_div。

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

我会补充一点visibility，display并且不一样。例如，如果一个元素是width: 10px, height: 10px，则visibility保留元素的维度空间（它仍然占用width: 10px, height: 10px），而display: none从父元素（width: 0, height: 0）中完全删除元素的维度。Visibility意味着它仍然在与其他受影响元素相关的流上以视觉方式表示，只是没有看到；display意味着它在屏幕上与其他显示/可见元素无关。

回答by Frank Weindel

Many others have mentioned to just use display: nonebut as you know this has an entirely different behavior than using the visibilityproperty.

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

One thing you can do is to use hidden/ inheritinstead of hidden/ visible. inheritwill cause an element to be visible by default, unless one of its parents is not. Which is what you want.

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

回答by Janne

In some cases you can't use the two solutions suggested here.

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

E.g. display: nonewon't work because the element needs to know its width and height when it's rendered while being hidden. visibility: hiddenmight not work if you don't have control of the children and can't add visiblity:inheritto them.

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

In those cases you could add opacity: 0with e.g z-index:-1to have elements visually hidden (just remember they'll still be there and be clickable etc).

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

回答by Christian

Remove the visibility:visible property from the children. That will fix your problem. You could be using .hide() and .show() (or .toggle()) on the parent instead to set the display to none instead of hidden.

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