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

Comment créer plusieurs divisions pliables avec un minimum de CSS ?

Barbara Streisand
Libérer: 2024-10-30 04:39:02
original
728 Les gens l'ont consulté

How to Create Multiple Collapsible Divs with Minimal CSS?

Réduire et développer des divisions CSS pures

Personnalisation de plusieurs divisions pliables avec un minimum de CSS

Le problème à résoudre est de créer plusieurs divs pliables sur une seule page sans gonfler le code CSS avec des sélecteurs excessifs. Dans ce cas, le code fourni utilise la pseudoclasse :target, mais il nécessite un sélecteur unique pour chaque question.

Solution : Adopter le

et Balises

Une approche plus efficace consiste à implémenter la balise HTML5

et balises. Ces balises sont spécialement conçues pour créer des éléments de contenu pliables et extensibles.

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>
Copier après la connexion

Compatibilité avec les navigateurs

Prise en charge du navigateur pour le et les balises sont décentes mais varient. Les navigateurs basés sur WebKit fournissent les meilleurs résultats. D'autres navigateurs peuvent afficher par défaut tout le contenu réductible, mais vous pouvez envisager une option de secours en utilisant la méthode masquer/afficher comme décrit dans le code d'origine.

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!