Afficher Child Div dans Hidden Parent Div

Question

Comment puis-je afficher une Div enfant tout en gardant sa Div parent cachée? Est-ce possible?

Mon code est ci-dessous:

  .Main-Div{
   display:none;
}

    Ceci est un peu de texte..
    Ceci est un peu de texte..

    Ceci est un peu de texte..
    Ceci est un peu de texte..

Answer 1

Définissez la visibilité de la classe parent en hidden ou collapse. Définissez celle de l'enfant en visible. Quelque chose comme cela :

.parent > .child
{
    visibility: visible;
}

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

Exemple complet : http://jsfiddle.net/pread13/h955D/153/

Modifié avec l'aide de @n1kkou

Answer 2

Je ne pense pas que ce soit possible.

Vous pouvez utiliser JavaScript pour extraire l'élément, ou le dupliquer puis l'afficher.

En jQuery, vous pourriez copier un élément.

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

Et ensuite l'ajouter à n'importe quel élément visible qui pourrait être approprié.

element.appendTo('certains éléments');

Answer 3

D'accord, pas possible avec display:none. Voici une solution différente qui cachera le parent et montrera l'enfant - cependant, la hauteur du parent ne sera pas réduite.

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

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

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

Answer 4

Pourquoi ne pas :

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

}

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

au lieu de display:none si votre Main Div contient uniquement du texte ?

Cette solution devrait permettre de réduire le texte dans la div parent sans masquer la div enfant. Elle fonctionne également avec les lecteurs d'écran sans faire des choses étranges comme pousser la div hors de la vue ou dupliquer l'objet avec JS.

Answer 5

J'ai utilisé une astuce jQuery pour remplacer le code parent par le code enfant. C'était quelque chose dont j'avais besoin pour mon problème spécifique, mais cela pourrait être utile pour quelqu'un d'autre:

   testcontent... void info from a template

      Je voulais seulement ce contenu

ensuite le code:

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

notez que cela ne modifiera pas les ID des DIV... une autre option est celle-ci (qui conservera les mêmes ID):

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