Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-11-04 01:07:03
original
253 Les gens l'ont consulté

How to Show Hidden Child Elements While Their Parent is Hidden?

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>
Copier après la connexion
<code class="css">.hide {
    visibility: hidden;
}

.reshow {
    visibility: visible;
}</code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal