Le contenu pliable peut-il être créé en HTML et CSS sans jQuery ?-tutoriel CSS-php.cn

Le contenu pliable peut-il être créé en HTML et CSS sans jQuery ?

DDD

Libérer： 2024-12-06 03:03:09

original

665 Les gens l'ont consulté

Can Collapsible Content Be Created in HTML and CSS Without jQuery?

Création de contenu pliable en HTML et CSS sans jQuery

De nombreux concepteurs s'efforcent de créer du contenu pliable comme celui présenté dans le thème de jQuery Mobile. Cependant, il convient de se demander si l'utilisation de jQuery est nécessaire pour une telle fonctionnalité. Cet article explore la possibilité d'y parvenir en utilisant du HTML et du CSS purs, en fournissant plusieurs exemples pour démontrer sa faisabilité.

En utilisant l'outil et Balises

HTML5 introduit la fonction et des balises spécialement conçues à cet effet. Ces balises ne nécessitent aucun style ni script supplémentaire.

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

Copier après la connexion

Utilisation du style CSS personnalisé

Pour un contrôle plus granulaire de l'apparence et du comportement du contenu pliable, le CSS personnalisé peut être implémenté.

details {
  border: 1px solid black;
  padding: 10px;
}
 
summary {
  cursor: pointer;
  font-weight: bold;
}
 
details[open] summary {
  color: green;
}
 
details[open] p {
  display: block;
}

Copier après la connexion

Dans cet exemple, les bordures et le remplissage des sections pliables sont définis, tandis que le curseur se transforme en pointeur en survolant le résumé. L'attribut open est utilisé pour changer la couleur du résumé et afficher/masquer le contenu.

Exemples supplémentaires

Les exemples suivants présentent des approches alternatives :

Utilisation des boutons radio : La création d'un bouton radio distinct pour chaque section pliable permet un repli plus "traditionnel". et développez le comportement.
JavaScript personnalisé sans jQuery : L'utilisation de fonctions JavaScript en ligne pour basculer la visibilité des sections réductibles élimine le besoin de jQuery, mais ajoute toujours des scripts externes.
Utilisation de Vue.js : L'exploitation d'un framework JavaScript léger comme Vue.js fournit une approche structurée pour gérer l'état et la réactivité, ce qui le rend adapté à un contenu pliable plus complexe.
Auvents CSS avec typographie fluide : Cette technique utilise du CSS pur avec une typographie fluide pour simuler l'effet d'effondrement et d'expansion avec des auvents qui peuvent être personnalisés pour s'adapter différentes tailles d'écran.

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!