Bien, tuve una situación en la que necesitaba agregar algunos elementos DOM clonados a un elemento DIV principal en una página web.
Tenía cuatro de estos titulares de DIV para padres. Cuando hago que su visibilidad cambie de visible a oculta, suceden cosas realmente extrañas: ¡TODOS los niños agregados de carga de página de publicación PERMANECEN visibles!
Aquí hay un enlace para descargar el código fuente: http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip
y aquí hay un enlace para ver el fenómeno de primera mano: http://www.clarencebowman.com/parent-child-visibility
Lo que verá es un cuadro rojo con algunos elementos secundarios magenta agregados, después de cargar la página. Hay un botón para mostrar/ocultar en la parte inferior de la página.
Agregué una franja verde en el DIV principal para mostrar que sus elementos secundarios realmente heredan su visibilidad correctamente.
Pero después de agregar los elementos secundarios clonados y luego ocultar el DIV principal, ¡NINGUNO de los elementos secundarios clonados desaparece!
Ya intenté colocar al niño que se va a clonar dentro del DIV principal antes de ejecutar el script de duplicación... no hace ninguna diferencia.
Todos los elementos secundarios que se agregan después de la carga de la página parecen haber perdido de alguna manera su vínculo de herencia con el elemento DIV principal (el cuadro rojo)...
¿Alguien más experimenta esto? ¿Existe una forma sencilla de reparar/reemplazar/reasignar la herencia de los hijos?
Estoy usando jQuery 1.5.
No está usando display: none en el padre (lo que afectaría a los hijos), está usando visibility: hidden en el padre, y dentro de los hijos tiene una visibility: visible . Si desea que los elementos secundarios se oculten, configúrelos para que sean visibility: hidden también, o use display: none en el elemento principal.
Entonces, como señaló Kyle, puede usar $('#parent_div').toggle(); , que aplicará fácilmente una display: none a #parent_div .
Solo agregaré que la visibility y la display no son lo mismo. Por ejemplo, si un elemento es width: 10px , height: 10px , la visibility retiene el espacio dimensional del elemento (todavía ocupa width: 10px , height: 10px ), mientras que display: none elimina por completo las dimensiones del elemento del elemento principal ( width: 0 , height: 0 ). Visibility significa que todavía se representa visualmente en el flujo en relación con otros elementos afectados, simplemente no se ve; display significa que no se ve ni se representa en la pantalla en relación con otros elementos mostrados/visibles.
Muchos otros han mencionado que solo usan display: none , pero como saben, esto tiene un comportamiento completamente diferente al uso de la propiedad de visibility .
Una cosa que puede hacer es usar hidden / inherit en lugar de hidden / visible . inherit hará que un elemento sea visible de forma predeterminada, a menos que uno de sus padres no lo sea. Que es lo que quieres.
En algunos casos, no puede usar las dos soluciones sugeridas aquí.
Por ejemplo display: none no funcionará porque el elemento necesita saber su ancho y alto cuando se representa mientras está oculto. visibility: hidden podría no funcionar si no tiene control de los elementos secundarios y no puede agregar visiblity:inherit .
En esos casos, podría agregar opacity: 0 con, por ejemplo z-index:-1 para tener elementos visualmente ocultos (solo recuerde que todavía estarán allí y se podrá hacer clic en ellos, etc.).