Implémentation de la fonctionnalité 'Afficher plus / moins' avec des CS purs

Le développement Web moderne exploite souvent le CSS pour créer des éléments dynamiques comme les curseurs, les modaux et les infractions, minimisant la recours JavaScript. Cet article démontre une approche CSS pure pour implémenter "Afficher plus / moins", créant même un exemple de style accordéon fonctionnel. Nous explorerons les techniques, les problèmes potentiels et les solutions. Les considérations d'accessibilité sont omises ici mais sont un aspect crucial pour l'amélioration future.

Concepts clés:

Ce CSS "Show plus / moins" s'appuie sur les sélecteurs "à cocher" et les sélecteurs de frères et sœurs. La structure HTML utilise une liste non ordonnée; Le dernier élément contient une case à cocher cachée et son étiquette. Une liste non ordonnée imbriquée contient le contenu à afficher / caché. Les propriétés max-height et transition CSS contrôlent la révélation / dissimulation de lisse. Des incohérences du navigateur peuvent exister; Par exemple, le comportement du curseur peut différer entre les navigateurs.

Connaissances CSS essentielles:

comprendre ce qui suit est vital:

• Sélecteur de frère général (~) : Sélectionne tous les frères et sœurs suivant un élément spécifié.
• Sélecteur de frères et sœurs adjacent ( ) : Sélectionne le frère immédiatement suivant.
• Hack Box Box : Utilisation de l'état coché pour déclencher les modifications CSS.

Une démo de codepen (lien omis car il n'est pas fourni dans l'entrée) fournit des exemples interactifs de ces techniques.

Structure HTML:

La structure HTML de base est (simplifiée à partir de l'original):

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="container">
    <input type="checkbox" id="showHide">
    <label for="showHide"></label>
    <ul>
      <li>Hidden Item 1</li>
      <li>Hidden Item 2</li>
    </ul>
  </li>
</ul>

Styler le conteneur à cocher:

Les styles .container positionnent l'étiquette et masquez la case:

.container {
  position: relative;
  height: auto;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  background: #e4e3df;
  display: block;
  width: 100%;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
}

Le contenu de l'étiquette ("plus" ou "moins") et l'animation sont gérés à l'aide de pseudo-éléments (::before et ::after):

label:before,
label:after {
  position: absolute;
}

/* ... (styles for :before and :after based on checked state) ... */

Cacher initialement le <code><ul> :

[type="checkbox"] ~ ul {
  display: none;
}

imitant onclick avec CSS:

L'état coché de la boîte à cocher révèle le contenu caché:

[type="checkbox"]:checked ~ ul {
  display: block;
}

La position et le contenu de l'étiquette sont ajustés lorsqu'ils sont vérifiés:

[type="checkbox"]:checked + label {
  top: 100%;
}

/* ... (styles for :before and :after when checked) ... */

Une démo de codepen (lien omis) présente cet effet de bascule de base.

Ajout de transitions lisses:

Pour les transitions plus lisses, utilisez max-height et transition:

[type="checkbox"] ~ ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44,.99,.48,1);
}

[type="checkbox"]:checked ~ ul {
  max-height: 300px; /* Or a calculated height */
}

La transition de l'étiquette est également mise à jour:

label {
  transition: top .45s cubic-bezier(.44,.99,.48,1);
}

Une démo de codepen (liaison omise) démontre la transition améliorée et plus lisse.

Considérations du navigateur:

Notez que le comportement du curseur peut être incohérent entre les navigateurs (en particulier avec les transitions).

Conclusion:

Cet article démontre une puissante approche CSS uniquement pour "montrer plus / moins". Bien qu'il existe des limites (principalement des incohérences du navigateur et la nécessité d'un max-height prédéterminé), cette technique offre une solution propre et sans javascript pour de nombreux scénarios. N'oubliez pas de toujours donner la priorité à l'accessibilité lors de la construction de composants interactifs.

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!