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

Comment créer des divisions pliables avec `` et `` HTML5 ?

Linda Hamilton
Libérer: 2024-10-31 02:56:02
original
538 Les gens l'ont consulté

How to Create Collapsible Divs with HTML5 `` and ``?

"Comment créer des div pliables à l'aide de HTML et CSS"

Les div pliables sont couramment utilisés pour présenter du contenu dynamique et organisé sur une page Web. . En règle générale, ces div contiennent un en-tête et un corps caché qui peuvent être développés et réduits lors de l'interaction de l'utilisateur. Créer des divs pliables uniquement avec CSS peut être pratique, en particulier pour maintenir une base de code propre et simple.

La pseudo-classe cible

Approches antérieures des divs pliables CSS impliquées en utilisant la pseudo-classe :target, qui active les styles lorsqu'un élément spécifique est lié par un attribut cible (par exemple, ). Cependant, cette technique nécessite une répétition importante pour plusieurs éléments réductibles, ce qui entraîne un code CSS volumineux.

Le HTML5

et Balises

Une solution alternative et élégante réside dans le HTML5 et balises. Le L'élément représente l'en-tête basculable, tandis que l'élément L’élément encapsule le contenu réductible. Cette approche élimine le besoin de JavaScript personnalisé ou de CSS complexe, simplifiant considérablement le processus de création de div pliables.

Exemple de code

Voici un exemple pour démontrer l'utilisation de < ;détails> et  :

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>
Copier après la connexion

Compatibilité avec les navigateurs

Alors que les et les balises offrent une solution pratique, la compatibilité du navigateur doit être prise en compte. Ils sont pris en charge dans les navigateurs modernes, notamment Chrome, Firefox et Safari ; cependant, tous les navigateurs ne peuvent pas l'afficher avec le même comportement.

Pour une prise en charge étendue du navigateur, si nécessaire, vous pouvez utiliser un polyfill comme details-polyfill.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal