Comment créer un Div pliable avec Pure CSS en utilisant et ?-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-11-01 00:49:02

original

910 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

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