Родитель скрыт, но дети все еще видны (я не хочу, чтобы они были видны)!

Хорошо, поэтому у меня была ситуация, когда мне нужно было добавить некоторые клонированные элементы DOM в родительский элемент DIV на веб-странице.

У меня было четыре из этих родительских владельцев DIV. Когда я делаю их видимость переключаться от видимого до скрытого, происходят действительно странные вещи: ВСЕ дочерние страницы, добавленные по почте, остаются REMAIN видимыми!

Вот ссылка для загрузки исходного кода: http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

и вот ссылка, чтобы увидеть это из первых рук: http://www.clarencebowman.com/parent-child-visibility

Что вы увидите, это красный ящик с добавленными к нему дополнительными дочерними элементами пурпурного цвета, post page-load. В нижней части страницы есть кнопка show/hide.

Я добавил зеленую полосу в родительский DIV, чтобы показать, что ее дочерние элементы действительно наследуют ее видимость должным образом.

Но после добавления клонированных дочерних элементов, а затем скрыть родительский DIV, NONE из клонированных дочерних элементов исчезает!

Я уже попытался помещать его в клонирование внутри родительского DIV перед запуском дублирующего script... он не имеет значения.

Любые дочерние элементы, которые добавляются после загрузки страницы, как-то потеряли свою связь наследования с родительским элементом DIV (красным полем).....

Кто-нибудь еще испытывает это? Есть ли простой способ восстановить/заменить/переназначить наследование детей?

Я использую jQuery 1.5.

Ответ 1

Вы не используете 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 означает, что он не отображается и не отображается на экране по отношению к другим отображаемым/видимым элементам.

Ответ 2

Многие другие упоминали, что просто используют display: none, но, как вы знаете, это имеет совершенно иное поведение, чем использование свойства visibility.

Можно только использовать hidden/inherit вместо hidden/visible. inherit приведет к тому, что элемент будет видимым по умолчанию, если только один из его родителей не является. Это то, что вы хотите.

Ответ 3

В некоторых случаях вы не можете использовать предлагаемые здесь два решения.

например. display: none не будет работать, потому что элемент должен знать его ширину и высоту, когда он отображается при скрытии. visibility: hidden может не работать, если вы не имеете контроля над дочерними элементами и не можете добавить к ним visiblity:inherit.

В этих случаях вы можете добавить opacity: 0, например, z-index:-1, чтобы визуально скрывать элементы (просто помните, что они все равно будут доступны и будут доступны для просмотра и т.д.).

Ответ 4

Удалите видимость: видимое свойство от детей. Это исправит вашу проблему. Вместо этого вы можете использовать .hide() и .show() (или .toggle()) для родителя вместо того, чтобы отображать на экране значение none вместо скрытого.