Child Div innerhalb eines versteckten Parent Div anzeigen

Question

Wie kann ich ein Child-Div anzeigen, während das Parent-Div ausgeblendet bleibt? Ist das möglich?

Mein Code steht unten:

<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

Setzen Sie die Sichtbarkeit der übergeordneten Klasse auf hidden oder collapse. Setzen Sie das Kind auf sichtbar. Etwa so:

.parent>.child
{
    visibility: visible;
}

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

Vollständiges Beispiel: http://jsfiddle.net/pread13/h955D/153/

Bearbeitet mit Hilfe von @n1kkou

Answer 2

Ich glaube nicht, dass das möglich ist.

Sie können JavaScript verwenden, um das Element herauszuziehen, oder es duplizieren und dann einblenden.

In jQuery können Sie ein Element kopieren.

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

Und dann an ein beliebiges sichtbares Element anhängen, das geeignet sein könnte.

element.appendTo('some element');

Answer 3

Einverstanden, nicht möglich mit display:none . Hier ist eine andere Lösung, bei der das übergeordnete Element ausgeblendet und das untergeordnete Element angezeigt wird - allerdings wird die Höhe des übergeordneten Elements nicht eingeklappt.

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

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

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

Answer 4

Warum nicht?

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

}

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

anstelle von display:none, wenn Ihr Main Div nur aus Text besteht?

Diese Lösung sollte den Text im übergeordneten Div einklappen, ohne das untergeordnete Div auszublenden. Auch funktioniert immer noch mit Screenreadern, ohne seltsame Dinge zu tun, wie das Div aus der Sicht zu stoßen oder das Objekt mit JS zu duplizieren.

Answer 5

Ich habe einen jQuery-Trick verwendet, um den übergeordneten Code durch den untergeordneten Code zu ersetzen. Es war etwas, das ich für mein spezielles Problem brauchte, aber es könnte für jemand anderen hilfreich sein:

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

dann den Code:

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

Beachten Sie, dass sich dies nicht auf die IDs der DIVS auswirkt... eine andere Option ist diese (die die IDs gleich lässt):

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