Mostrar Child Div dentro de Hidden Parent Div

Question

¿Cómo puedo mostrar una Div Child manteniendo oculta su divs padre? Se puede hacer esto?

Mi código es el siguiente:

<style> 
    .Main-Div{ 
    display:none; 
} 
</style> 

<div class="Main-Div"> 
    This is some Text.. 
    This is some Text.. 
    <div class="Inner-Div'> 
     <a href="#"><img src="/image/pic.jpg"></a> 
    </div> 
    This is some Text.. 
    This is some Text.. 
</div> 

Answer 1

No creo que sea posible.

puede usar javascript para extraer el elemento, o duplicarlo y luego mostrarlo.

en jQuery puede copiar un elemento

var element = jQuery('.Inner-Div').clone(); 

y luego añadir a cualquier elemento visible que sea apropiado.

element.appendTo('some element'); 

Answer 2

No. Desafortunadamente para usted, es no posible.

Answer 3

Puede usar javascript para mover al niño fuera de la div principal.

Answer 4

De acuerdo, no es posible con la pantalla: ninguna. Aquí hay una solución diferente que ocultará al padre y mostrará al hijo; sin embargo, la altura del elemento principal no se colapsará.

.Main-Div { 
    position: relative; 
    left: -9999px; 
} 

.Inner-Div { 
    position: relative; 
    left: 9999px; 
} 

Ejemplo: http://jsfiddle.net/luke_charde/jMYF7/

Answer 5

Pues bien, este es un viejo, pero me cayeron bien también. Mi solución fue un poco diferente: -

1. Crea una imagen con el mismo color que el fondo (blanco en mi caso) que cubrirá el div. Esta imagen tiene un posicionamiento absoluto y un índice z más alto que el div que quiero ocultar.
2. Haga que la posición div interior (la que desea ver): relativa y le dé el orden z más alto.
3. div principal comienza como oculto.
4. Cuando se carga la página, coloque la imagen de cubierta y visualice la división principal. Como el div es un orden z más bajo, estará detrás de la imagen que lo cubre, por lo que no será visible. Sin embargo, el div interno tiene un orden z más alto de nuevo y será visible.

El beneficio de este enfoque es que la estructura y la posición de los principales elementos div y secundarios pueden permanecer inalterados. Esto significa que cuando desea mostrar el div principal, simplemente puede eliminar la imagen que lo cubre. Además, si desea ver cómo se vería la div principal al depurar, simplemente puede eliminar el elemento de imagen que lo cubre en las herramientas de depuración del navegador, como firebug en firefox o ctrl + shift + i en cromo.

Simplemente recuerde configurar el índice Z en un elemento que necesita para estar en posición absoluta, relativa o fija. Si tiene algún problema para que el índice z surta efecto, probablemente tenga que ver con los contextos de apilamiento. Ver here para una buena descripción de cómo solucionar esto.

Answer 6

Por qué no:

.Main-Div{ 
font-size:0px; 
line-height:0; 
margin:0; 
padding:0; 
height:0; 

} 

.Inner-Div{ 
font-size:12pt 
} 

en lugar de display: none si su Div principal es de sólo texto?

Esta solución debe contraer el texto en el elemento primario div sin ocultar el elemento secundario. También funciona con lectores de pantalla sin hacer cosas extrañas como golpear el div fuera de la vista o duplicar el objeto con JS.

Answer 7

Utilicé un truco jQuery para reemplazar el código principal con el código hijo. Era algo que necesitaba para mi problema específico, pero que podría ser útil para otra persona:

<div id='wrapper'> 
    testcontent... void info from a template 
    <div id='inside'> 
     I wanted this content only 
    </div> 
</div> 

entonces el código:

$(document).ready(function(){ 
    $("#wrapper").html($("#inside").html()); 
}); 

nota que esto no afectará a la ID de la DIVS .. . otra opción es la siguiente (que mantendrá el ID es el mismo:

$(document).ready(function(){ 
    $("#wrapper").before($("#inside").outerHTML).remove(); 
}); 

Answer 8

Establecer la visibilidad de la clase padre a escondidas o colapso Establecer que el niño visibles Algo como esto:..

.parent>.child 
{ 
    visibility: visible; 
} 

.parent 
{ 
    visibility: hidden; 
    width: 0; 
    height: 0; 
    margin: 0; 
    padding: 0; 
} 

ejemplo completo: http://jsfiddle.net/pread13/h955D/153/

Editado con la ayuda de @n1kkou

Answer 9

Ya que no es posible hacer eso, se podría clonar/tirar del elemento como se ha mencionado en este answer

Pero si Los eventos en este elemento afectan a sus padres/hijos. Puede probar esta solución.

1. Ponga una envoltura alrededor de la div padre
2. añadir otro a los niños a la envoltura (que se utiliza como referencia)
3. ocultar el div padre.

como no -

<style> 
    .Main-Div{ 
    display:none; 
    } 
</style> 

<div class="wrapper"> 

    <div class="Main-Div"> 
    This is some Text.. 
    This is some Text.. 
    <div class="Inner-Div'> 
     <a href="#"><img src="/image/pic.jpg"></a> 
    </div> 
    This is some Text.. 
    This is some Text.. 
    </div> 

    <div class="Inner-Div-Refer'> 
    <a href="#"><img src="/image/pic.jpg"></a> 
    </div> 

</div> 

ahora se activan todos los eventos en div 'Inner-Div-Consulte' a div original 'Inner-Div'. Al igual que -

$('.Inner-Div-Refer a').click(function(){ 
    $(this).parent().children('.Main-Div').children('.Inner-Div').children('a').trigger('click'); 
}); 

Answer 10

$(document).ready(function(){ 
var innerElement = $('.Inner-Div'); 
var parent = $('.Main-Div'); 

// body or whatever selector you want to move the element 
$(body).append(innerElement); 

// could use hide also 
parent.detach(); }) 

Sé que esto es un mensaje más viejo y alguien ya acepté la respuesta, pero yo prefiero este método. JQuery moverá el elemento al cuerpo (o a cualquier otra ubicación seleccionada) a través del método append(). Almaceno la matriz en una variable y de quitar() por lo que si hay que poner todo de nuevo juntos más tarde se puede hacer fácilmente:

$(body).append(parent); 
parent.append(innerElement); 

Y todo ha vuelto la forma en que estaba.