Родитель скрыт, но дети все еще видны (я не хочу, чтобы они были видны)!
Хорошо, поэтому у меня была ситуация, когда мне нужно было добавить некоторые клонированные элементы 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 вместо скрытого.