Comment créer un Div pliable avec Pure CSS en utilisant et ?

Solution Div pliable CSS pure

Dans cette requête, un utilisateur cherche des conseils sur la création d'un div pliable CSS pur, similaire à l'exemple dans le jsfiddle fourni. Cependant, elles visent à minimiser le code CSS et à éviter d'écrire de nombreux sélecteurs pour plusieurs paires question-réponse.

Contrairement à l'approche originale basée sur la pseudoclasse :target, cette requête introduit la requête

et Balises HTML. Ces balises sont conçues exclusivement pour créer du contenu pliable.

En utilisant

et

•  : Définit le texte récapitulatif initialement visible avant de développer le div.
•  : Entoure le contenu réductible qui est masqué jusqu'à ce que vous cliquiez sur le résumé.

Exemple :

<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>

Prise en charge du navigateur

Prise en charge du navigateur pour le et les balises sont variées. Les navigateurs basés sur Webkit, tels que Chrome et Safari, offrent une prise en charge optimale de cette fonctionnalité. D'autres navigateurs peuvent présenter des comportements par défaut, tels que l'affichage de tout le contenu pliable.

Méthode de secours

Pour les navigateurs qui ne prennent pas entièrement en charge la fonctionnalité

et balises, une méthode de repli utilisant CSS peut être envisagée. Cela implique d'utiliser la combinaison de la pseudoclasse :target et de la propriété display pour basculer la visibilité du contenu réductible.

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!