Comment créer une liste de contenu pliable avec Pure CSS : Comment empêcher le contenu de se cacher lorsque vous cliquez n'importe où sur la page ?

Masquer et afficher le contenu de manière transparente avec CSS

Pour obtenir une liste de contenu pliable avec du CSS pur, nous sommes confrontés à un défi : le contenu peut être masqué en cliquant simplement n'importe où sur le page. Cela s'écarte du comportement souhaité consistant à masquer le contenu uniquement lorsque le lien "Masquer" est cliqué.

La solution CSS

La solution réside dans l'exploitation des sélecteurs :focus et ~. Le code CSS révisé :

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

Le balisage HTML

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

Comprendre la solution

1. État de focus : Le :focus Le sélecteur cible l'élément qui a reçu le focus (par exemple, lorsque cliqué).
2. Sélecteur frère/sœur (~) :Le sélecteur ~ correspond à un élément qui est un frère de l'élément sélectionné.
3. Affichage conditionnel : Les règles CSS définissent la propriété d'affichage de l'élément .alert en fonction de l'état de focus des .span3 et .span2 éléments.

Lorsque le lien "Hide Me" (.span3) reçoit le focus, son frère, l'élément .alert devient masqué. À l'inverse, lorsque le lien « Montrez-moi » (.span2) reçoit le focus, son frère, l'élément .alert, devient visible. Cela garantit que le contenu est masqué ou affiché uniquement lorsque le lien correspondant est cliqué, comme prévu.

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!