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

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

Barbara Streisand
Libérer: 2024-11-01 00:49:02
original
878 Les gens l'ont consulté

How to Create a Collapsible Div with Pure CSS using  and ?

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>
Copier après la connexion

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!

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