Wie zeige ich ein ausgeblendetes untergeordnetes Element in HTML an, wenn das übergeordnete Element ausgeblendet ist?

Ausgeblendete untergeordnete Elemente anzeigen

Wenn Sie in HTML die Anzeigeeigenschaft eines Elements auf „none“ setzen, wird dieses Element effektiv ausgeblendet. Was passiert jedoch, wenn ein untergeordnetes Element innerhalb eines ausgeblendeten übergeordneten Elements angezeigt werden muss?

Ursprüngliche Abfrage

Ein Benutzer ist auf dieses Problem gestoßen, als er mit verschachtelten ungeordneten Listen arbeitete. Sie wollten eine Validierungsfehlermeldung in einem untergeordneten Listenelement anzeigen, obwohl das übergeordnete Listenelement ausgeblendet war. Konventionelle Erkenntnisse deuten darauf hin, dass dies aufgrund des fehlenden Kontexts für das untergeordnete Element möglicherweise nicht möglich ist, wenn sein übergeordnetes Element nicht sichtbar ist.

Lösung

Obwohl es nicht möglich ist Um ein untergeordnetes Element direkt anzuzeigen, wenn sein übergeordnetes Element display:none ist, gibt es einen alternativen Ansatz, der eine ähnliche Funktionalität bietet:

Sichtbarkeit verwenden

Anstatt die Anzeige festzulegen Wenn Sie die Eigenschaft „none“ für das übergeordnete Element festlegen, setzen Sie die Eigenschaft „visibility“ auf „hidden“. Dadurch wird das übergeordnete Element aus der Ansicht entfernt, während seine untergeordneten Elemente weiterhin angezeigt werden können.

CSS-Beispiel:

<code class="css">.hide {
    visibility: hidden;
}

.reshow {
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
}</code>

Markup-Beispiel:

<code class="html"><ul>
    <li>One</li>
    <li class="hide">
        Two
        <ul>
            <li class="reshow">Re Show Me</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li>Three</li>
</ul></code>

Bei dieser Methode bleibt das übergeordnete Element ausgeblendet, das untergeordnete Element mit der Klasse „reshow“ wird jedoch oben links auf dem Bildschirm angezeigt und positioniert.

Zusätzliche Überlegungen

• Das übergeordnete Element nimmt weiterhin Platz im Layout ein, auch wenn es ausgeblendet ist. Dies könnte sich auf das Gesamterscheinungsbild der Seite auswirken.
• Dieser Ansatz funktioniert nur, wenn das übergeordnete Element absolut positioniert ist oder eine bestimmte Höhe und Breite hat.
• Die Verwendung dieser Technik wird nicht empfohlen ausgiebig, da dies zu Verwirrung und Zugänglichkeitsproblemen führen kann.

Das obige ist der detaillierte Inhalt vonWie zeige ich ein ausgeblendetes untergeordnetes Element in HTML an, wenn das übergeordnete Element ausgeblendet ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!