Comment créer plusieurs divisions pliables avec un minimum de 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>

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!