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

Da dies nicht möglich ist, können Sie das Element klonen/ziehen, wie in diesem Artikel beschrieben Antwort

Wenn sich jedoch Ereignisse auf diesem Element auf seine übergeordneten/untergeordneten Elemente auswirken, können Sie diese Abhilfe versuchen.

1. Einen Wrapper um das übergeordnete Div legen
2. dem Wrapper ein weiteres Kind hinzufügen (das als Referenz verwendet wird)
3. Das übergeordnete Div ausblenden.

Etwa so -

 <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>

Lösen Sie nun alle Ereignisse im div 'Inner-Div-Refer' auf das ursprüngliche div 'Inner-Div' aus. Wie -

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

Answer 2

Nein. Unglücklicherweise für Sie, ist es no möglich.

Answer 3

Nun, das ist eine alte Geschichte, aber ich habe sie auch getroffen. Meine Lösung war ein bisschen anders:-

1. Erstellen Sie ein Bild mit der gleichen Farbe wie der Hintergrund (in meinem Fall weiß), das das Div abdecken wird. Dieses Bild hat eine absolute Positionierung und einen höheren Z-Index als das Div, das ich ausblenden möchte.
2. Machen Sie das innere div (das, das Sie sehen wollen) position: relative und geben Sie ihm die höchste z-Ordnung.
3. main div ist zunächst ausgeblendet.
4. Wenn die Seite geladen wird, positionieren Sie das Deckbild und machen Sie das Haupt-Div sichtbar. Da das div eine niedrigere z-Ordnung hat, wird es hinter dem abdeckenden Bild liegen und daher nicht sichtbar sein. Das innere Div hat jedoch wieder eine höhere z-Ordnung und wird sichtbar sein.

Der Vorteil dieses Ansatzes besteht darin, dass die Struktur und Position des Haupt-Divs und der untergeordneten Elemente durchgehend unverändert bleiben können. Das heißt, wenn Sie das Haupt-Div anzeigen möchten, können Sie einfach das abdeckende Bild entfernen. Wenn Sie außerdem sehen möchten, wie das Haupt-Div bei der Fehlersuche aussehen würde, können Sie das abdeckende Bildelement in den Debugger-Tools des Browsers, wie z. B. Firebug in Firefox oder Strg+Umschalt+i in Chrome, einfach entfernen.

Denken Sie daran, dass Sie den Z-Index für ein Element so einstellen, dass es absolut, relativ oder fest positioniert ist. Wenn Sie Probleme damit haben, dass der z-index wirksam wird, liegt das wahrscheinlich an der Stapelung von Kontexten. Siehe ici für eine gute Beschreibung, wie man dieses Problem lösen kann.

Answer 4

$(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(); })

Ich weiß, dies ist ein älterer Beitrag und jemand hat die Antwort bereits akzeptiert, aber ich bevorzuge diese Methode. JQuery wird das Element in den Körper (oder jede andere ausgewählte Position) über die append()-Methode verschieben. Ich speichere das Elternteil in einer Variablen und detach() es so, wenn Sie brauchen, um alles wieder zusammen später können Sie leicht tun:

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

Und alles ist wieder so, wie es war.

Answer 5

Ich habe einfaches JavaScript mit querySelector verwendet, um alle Zielelemente zu entfernen, während das, was sich in ihnen befindet, erhalten bleibt (jetzt können Sie einfach einen beliebigen CSS-Selektor anwenden):

{
    let selector = 'div';
    let remove_element = document.querySelector(selector);

    //loop continues removing elements until they are all out
    while (remove_element)
    {
        remove_element.outerHTML = remove_element.innerHTML;
        remove_element = document.querySelector(selector);
    }
}