Comment puis-je basculer la visibilité de plusieurs div en un clic en utilisant uniquement CSS ?

Contrôle de la visibilité des divs lors d'un clic à l'aide de CSS

Problème :

Un utilisateur souhaite activer ou désactiver la visibilité de plusieurs divs. cliquez en utilisant uniquement CSS, permettant l'accessibilité sans JavaScript.

Solution :

Employer le "checkbox hack" :

1. Créer une case à cocher masquée : Définir un élément et définissez son affichage sur aucun à l'aide de CSS.
2. Associez un événement de clic à la case à cocher : Lorsque vous cliquez sur l'option de menu, activez l'attribut coché de la case à cocher.
3. Style des divs en fonction de l'état de la case à cocher : Utilisez le pseudo-sélecteur :checked en CSS pour appliquer différents styles aux divs selon que le la case est cochée ou non. Cela affecte leur visibilité, leur décoloration ou leur comportement de glissement.

Exemple de code :

<input type="checkbox">

#myCheckbox:checked ~ #myDiv {
  display: block;
  animation: slide-in 0.5s ease-in-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

Avantages :

• Accessibilité : Fonctionne sans JavaScript activé.
• Contrôle : Ajustez les animations CSS pour personnaliser le comportement de glissement/fondu.
• Simplicité : Nécessite un minimum de code CSS et aucun JavaScript.

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!