Comment afficher les éléments enfants masqués pendant que leur parent est masqué ?

Affichage des éléments enfants masqués

Dans certaines situations, vous souhaiterez peut-être afficher un élément enfant même lorsque son élément parent est masqué à l'aide de l'affichage CSS : aucun. Cela peut être utile pour des scénarios tels que l'affichage d'erreurs de validation pour les champs masqués.

Cependant, il est important de noter que ce comportement n'est pas intrinsèquement pris en charge par CSS. Lorsqu'un élément parent est masqué, il supprime efficacement à la fois le parent et ses enfants du DOM visuel.

Solution possible en utilisant la visibilité

Si vous utilisez display : none ne l'est pas essentiel, une approche alternative consiste à utiliser CSS visibilité: Hidden à la place. Cette propriété masque le contenu d'un élément, y compris ses enfants, mais réserve quand même leur place dans la mise en page.

En utilisant visibilité : caché, vous pouvez masquer l'élément parent tout en rendant visible l'élément enfant souhaité. Cette technique ignore effectivement le parent caché, permettant à l'élément enfant d'être affiché.

Exemple de code

Dans l'exemple JSFiddle fourni :

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

Dans ce cas, visible : caché masque l'élément parent avec la classe hide, mais l'élément enfant avec la classe reshow reste visible. Cela permet d'afficher le message d'erreur de validation même si le champ parent est masqué.

N'oubliez pas que cette approche préserve l'espace de l'élément parent dans la mise en page, ce qui peut ne pas être idéal dans tous les scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!