So erstellen Sie eine zusammenklappbare Inhaltsliste mit reinem CSS: Wie verhindern Sie, dass Inhalte ausgeblendet werden, wenn Sie auf eine beliebige Stelle auf der Seite klicken?

Nahtloses Ausblenden und Anzeigen von Inhalten mit CSS

Um eine zusammenklappbare Inhaltsliste mit reinem CSS zu erreichen, stehen wir vor einer Herausforderung: Inhalte können ausgeblendet werden, indem einfach irgendwo darauf geklickt wird Seite. Dies weicht vom gewünschten Verhalten des Ausblendens von Inhalten nur dann ab, wenn auf den Link „Ausblenden“ geklickt wird.

Die CSS-Lösung

Die Lösung liegt in der Nutzung der Selektoren :focus und ~. Der überarbeitete CSS-Code:

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

Das HTML-Markup

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

Die Lösung verstehen

1. Fokusstatus: Der :focus Der Selektor zielt auf das Element ab, das den Fokus erhalten hat (z. B. beim Klicken).
2. Geschwisterselektor (~): Der ~-Selektor stimmt mit einem Element überein, das ein gleichgeordnetes Element des ausgewählten Elements ist.
3. Bedingte Anzeige:Die CSS-Regeln legen die Anzeigeeigenschaft des .alert-Elements basierend auf dem Fokusstatus der .span3- und .span2-Elemente fest.

Wenn die Der „Hide Me“-Link (.span3) erhält den Fokus, sein Geschwisterelement, das .alert-Element, wird ausgeblendet. Wenn umgekehrt der „Show Me“-Link (.span2) den Fokus erhält, wird sein Geschwisterelement, das .alert-Element, sichtbar. Dadurch wird sichergestellt, dass der Inhalt wie vorgesehen ausgeblendet oder nur dann angezeigt wird, wenn auf den entsprechenden Link geklickt wird.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine zusammenklappbare Inhaltsliste mit reinem CSS: Wie verhindern Sie, dass Inhalte ausgeblendet werden, wenn Sie auf eine beliebige Stelle auf der Seite klicken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!