Eltern versteckt, aber Kinder noch sichtbar (ich will nicht, dass sie sichtbar sind)!

Lesezeit: 4 Minuten

Okay, ich hatte also eine Situation, in der ich einige geklonte DOM-Elemente zu einem übergeordneten DIV-Element auf einer Webseite hinzufügen musste.

Ich hatte vier dieser Eltern-DIV-Inhaber. Wenn ich ihre Sichtbarkeit von sichtbar auf verborgen schalte, passiert etwas wirklich Seltsames: ALLE nach dem Laden der Seite hinzugefügten untergeordneten Elemente BLEIBEN sichtbar!

Hier ist ein Link zum Download des Quellcodes:
http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

und hier ist ein Link, um das Phänomen aus erster Hand zu sehen:
http://www.clarencebowman.com/parent-child-visibility

Was Sie sehen werden, ist ein rotes Kästchen, dem einige magentafarbene untergeordnete Elemente hinzugefügt wurden. Laden Sie die Seite nach. Unten auf der Seite befindet sich ein Ein-/Ausblenden-Button.

Ich habe einen grünen Streifen im übergeordneten DIV hinzugefügt, um zu zeigen, dass seine untergeordneten Elemente tatsächlich seine Sichtbarkeit ordnungsgemäß erben.

Aber nachdem Sie die geklonten untergeordneten Elemente hinzugefügt und dann das übergeordnete DIV ausgeblendet haben, verschwindet KEINES der geklonten untergeordneten Elemente!

Ich habe bereits versucht, das zu klonende Kind im übergeordneten DIV zu platzieren, bevor ich das Duplizierskript ausführe … es macht keinen Unterschied.

Alle untergeordneten Elemente, die nach dem Laden der Seite hinzugefügt werden, scheinen irgendwie ihre Vererbungsverknüpfung mit dem übergeordneten DIV-Element (das rote Kästchen) verloren zu haben …

Hat das noch jemand erlebt? Gibt es eine einfache Möglichkeit, das Erbe der Kinder zu reparieren / zu ersetzen / neu zuzuweisen?

Ich verwende jQuery 1.5.

  • Versuchen display: none; Anstatt von visibility: hidden;

    – dcestari

    4. März 2011 um 0:49 Uhr

  • außer dass display none eine Eigenschaft des CSS ist, wo hidden eine Eigenschaft des Elements ist … Ich verstehe nicht, warum es für die meisten meiner Codes funktioniert und bei einigen Beispielen fehlschlägt …

    – Jota

    27. Mai 2020 um 14:17 Uhr

Benutzer-Avatar
Jared Farrish

Sie verwenden nicht display: none auf dem übergeordneten Element (was Auswirkungen auf die untergeordneten Elemente hätte), das Sie verwenden visibility: hidden auf den Eltern, und innerhalb der Kinder haben a visibility: visible CSS-Attribut. Wenn Sie möchten, dass sich die Kinder verstecken, stellen Sie sie entweder ein visibility: hidden auch, oder verwenden display: none auf dem übergeordneten Element.

Also, wie Kyle betonte, können Sie verwenden $('#parent_div').toggle();die leicht gelten a display: none zu #parent_div.

Ich füge das einfach hinzu visibility und display sind nicht das Gleiche. Zum Beispiel, wenn ein Element ist width: 10px, height: 10px, visibility behält den dimensionalen Raum des Elements bei (es nimmt immer noch width: 10px, height: 10px), wohingegen display: none entfernt die Abmessungen des Elements vollständig vom übergeordneten Element (width: 0, height: 0). Visibility bedeutet, dass es immer noch visuell im Fluss in Bezug auf andere betroffene Elemente dargestellt wird, es ist nur nicht zu sehen; display bedeutet, dass es in Bezug auf andere angezeigte/sichtbare Elemente auf dem Bildschirm weder gesehen noch dargestellt wird.

  • Schalten Sie das übergeordnete Element mit um $('#parent_div').toggle(); . Es wird die Kinder verstecken.

    – Kyle

    4. März 2011 um 0:53 Uhr

  • @ Kyle – Ja, das tut es; es benutzt display: none. Im Sinne von jQuery ist das eine Antwort, also habe ich sie meiner Antwort hinzugefügt. Vielen Dank.

    – Jared Farrish

    4. März 2011 um 0:56 Uhr

  • @Kyle – Als ich vor vielen Monden zum ersten Mal CSS lernte, hatte ich Mühe, den Unterschied zwischen zu verstehen visibility und display. Ich kann mir also vorstellen, wie jemand darauf hereinfallen könnte. Ich habe festgestellt, dass in den meisten typischen HTML-Anwendungen visibility wird nur nicht so oft verwendet.

    – Jared Farrish

    4. März 2011 um 1:02 Uhr

Viele andere haben erwähnt, einfach zu verwenden display: none aber wie Sie wissen, hat dies ein völlig anderes Verhalten als die Verwendung von visibility Eigentum.

Eine Sache, die Sie tun können, ist zu verwenden hidden / inherit Anstatt von hidden / visible. inherit bewirkt, dass ein Element standardmäßig sichtbar ist, es sei denn, eines seiner übergeordneten Elemente ist dies nicht. Was Sie wollen.

  • inherit ist die Antwort!

    – Dennis

    11. April 2015 um 13:49 Uhr

  • Die akzeptierte Antwort von using display:none funktioniert möglicherweise in einigen bestimmten Fällen (wo das Elementlayout / -fluss keine Rolle spielt), aber diese Antwort ist eine bessere allgemeine Lösung.

    – Ghazgkull

    17. September 2015 um 17:05 Uhr

  • Dies sollte die beste Antwort sein!

    – Ja

    27. Juni 2016 um 1:45 Uhr

In einigen Fällen können Sie die beiden hier vorgeschlagenen Lösungen nicht verwenden.

Z.B
display: none funktioniert nicht, da das Element seine Breite und Höhe kennen muss, wenn es gerendert wird, während es ausgeblendet ist.
visibility: hidden funktioniert möglicherweise nicht, wenn Sie keine Kontrolle über die untergeordneten Elemente haben und nicht hinzufügen können visiblity:inherit zu ihnen.

In diesen Fällen könnten Sie hinzufügen opacity: 0 mit zB z-index:-1 um Elemente visuell zu verbergen (denken Sie nur daran, dass sie immer noch da sind und anklickbar sind usw.).

Entfernen Sie die Eigenschaft visible:visible von den untergeordneten Elementen. Das wird Ihr Problem beheben. Sie könnten stattdessen .hide() und .show() (oder .toggle()) auf dem übergeordneten Element verwenden, um die Anzeige auf „none“ statt „hidden“ zu setzen.

1227100cookie-checkEltern versteckt, aber Kinder noch sichtbar (ich will nicht, dass sie sichtbar sind)!

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy