Wie zeige ich ausgeblendete untergeordnete Elemente an, während ihr übergeordnetes Element ausgeblendet ist?

Ausgeblendete untergeordnete Elemente anzeigen

In bestimmten Situationen möchten Sie möglicherweise ein untergeordnetes Element anzeigen, auch wenn sein übergeordnetes Element mithilfe der CSS-Anzeige ausgeblendet ist : keine. Dies kann für Szenarien wie die Anzeige von Validierungsfehlern für ausgeblendete Felder nützlich sein.

Es ist jedoch wichtig zu beachten, dass dieses Verhalten von CSS nicht grundsätzlich unterstützt wird. Wenn ein übergeordnetes Element ausgeblendet wird, werden sowohl das übergeordnete Element als auch seine untergeordneten Elemente effektiv aus dem visuellen DOM entfernt.

Mögliche Lösung mithilfe der Sichtbarkeit

Bei Verwendung von display: none ist dies nicht der Fall Wesentlich ist, besteht ein alternativer Ansatz darin, stattdessen CSS Visibility: Hidden zu verwenden. Diese Eigenschaft verbirgt den Inhalt eines Elements, einschließlich seiner untergeordneten Elemente, behält aber dennoch deren Platz im Layout.

Durch die Verwendung von „visibility:hidden“ können Sie das übergeordnete Element ausblenden und gleichzeitig das gewünschte untergeordnete Element sichtbar machen. Diese Technik ignoriert effektiv das ausgeblendete übergeordnete Element und ermöglicht die Anzeige des untergeordneten Elements.

Codebeispiel

Im bereitgestellten JSFiddle-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>

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

.reshow {
    visibility: visible;
}</code>

In diesem Fall blendet „visibility:hidden“ das übergeordnete Element mit der Klasse „hide“ aus, das untergeordnete Element mit der Klasse „reshow“ bleibt jedoch sichtbar. Dadurch kann die Validierungsfehlermeldung angezeigt werden, obwohl das übergeordnete Feld ausgeblendet ist.

Bedenken Sie, dass bei diesem Ansatz der Platz des übergeordneten Elements im Layout erhalten bleibt, was möglicherweise nicht in allen Szenarien ideal ist.

Das obige ist der detaillierte Inhalt vonWie zeige ich ausgeblendete untergeordnete Elemente an, während ihr übergeordnetes Element ausgeblendet ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!