padre oculto pero los niños siguen visibles (¡no los quiero visibles)!

Question

Bien, entonces tuve una situación en la que necesitaba agregar algunos elementos DOM clonados a un elemento DIV padre 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 a la carga de la página PERMANECES 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í es un enlace para ver el fenómeno de primera mano: http://www.clarencebowman.com/parent-child-visibility

Lo que verán es una caja roja con un poco de color magenta elementos secundarios agregados, publicar carga de página. Hay un botón mostrar/ocultar en la parte inferior de la página.

Agregué una franja verde en el DIV padre para mostrar que sus elementos secundarios sí heredan su visibilidad correctamente.

¡Pero después de agregar los elementos secundarios clonados y luego ocultar el DIV padre, NINGUNO de los elementos secundarios clonados desaparece!

Ya he intentado colocar al niño para ser clonado dentro del DIV padre antes de ejecutar el script de duplicación ... no hace ninguna diferencia.

cualquier elemento secundario que se agregan después de carga de páginas parece que de alguna manera han perdido su vínculo con la herencia del elemento DIV padre (el cuadro rojo) .....

Cualquier otra experiencia de esto? ¿Hay una manera simple de reparar/reemplazar/reasignar la herencia de los niños?

Estoy usando jQuery 1.5.

Answer 1

No está utilizando display: none en el elemento principal (que afectaría a los elementos secundarios), está utilizando visibility: none en el elemento primario y dentro de los elementos secundarios tiene un atributo visibility: visible css. Si desea que los niños se oculten, configúrelos también para que sean visible: hidden o use display: none en el elemento principal.

Por lo tanto, como señaló Kyle, puede usar $('#parent_div').toggle();, que aplicará fácilmente un display: none al .

Voy a agregar que visibility y display no son lo mismo. Por ejemplo, si un elemento es width: 10px, height: 10px, visibility conserva espacio dimensional del elemento (todavía ocupa width: 10px, height: 10px), mientras que display: none elimina por completo las dimensiones del elemento desde el elemento de matriz (width: 0, height: 0). Visibility significa que todavía está representado 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 visibles/visibles.

Answer 2

Eliminar la visibilidad: propiedad visible de los niños. Eso solucionará tu problema. Podría utilizar .hide() y .show() (o .toggle()) en el elemento primario en su lugar para establecer la pantalla en none en lugar de hidden.

Answer 3

Muchos otros han mencionado simplemente usar display: none pero, como saben, esto tiene un comportamiento completamente diferente al de usar la propiedad visibility.

Una cosa que puede hacer es utilizar hidden/inherit en lugar de hidden/visible. inherit hará que un elemento sea visible por defecto, a menos que uno de sus padres no lo esté. Que es lo que quieres

Answer 4

En algunos casos, no puede usar las dos soluciones sugeridas aquí.

E.g. 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 niños y no puede agregar visiblity:inherit a ellos.

En esos casos, puede agregar opacity: 0 con, por ejemplo, z-index:-1 para tener elementos visualmente ocultos (recuerde que todavía estarán allí y que se puede hacer clic, etc.).