Comment puis-je afficher et masquer des éléments à la demande en utilisant uniquement CSS ?

Afficher et masquer les éléments à la demande avec CSS

La navigation dans le contenu Web doit être une expérience sans effort, quels que soient les paramètres du navigateur ou les limitations de l'appareil. Dans les cas où JavaScript n'est pas disponible, garantir l'accessibilité est crucial.

Considérez un scénario avec un menu et plusieurs divs cachés. La sélection de l'utilisateur doit déclencher l'apparition de divs spécifiques. Si JavaScript offre une solution idéale, il cesse de fonctionner lorsqu'il est désactivé.

CSS à la rescousse

Pour surmonter ce défi, CSS vient à notre aide. Le "checkbox hack" exploite la puissance des cases à cocher et le pseudo-sélecteur polyvalent :checked.

Comment ça marche

Initialement, une case à cocher et plusieurs divs sont créés. La case à cocher se voit attribuer trois styles :

1. Caché : La case à cocher est visuellement masquée avec l'affichage : aucun.
2. Non sélectionné : La Le div associé reste masqué avec affichage : aucun.
3. Sélectionné : Le div associé à la case à cocher cochée s'affiche avec display: inline-block.

Implémentation

Dans le HTML, créez des éléments de case à cocher et des éléments d'étiquette correspondants avec chaque étiquette associé à un div unique.

<input type="checkbox">

Dans le CSS, définissez les styles de la case à cocher et labels :

/* Hide checkbox visually */
input[type="checkbox"] {
  display: none;
}

/* Use label for checkbox to provide visual accessibility */
label {
  display: inline-block;
  cursor: pointer;
}

/* Hide divs initially */
div {
  display: none;
}

/* Show div when associated checkbox is checked */
input[type="checkbox"]:checked ~ div {
  display: inline-block;
}

Conclusion

Avec cette solution basée sur CSS, les divs peuvent être affichés ou masqués de manière transparente au clic, même avec JavaScript désactivé, garantissant ainsi un accès universel expérience utilisateur.

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!