Wie erstelle ich mit und ein zusammenklappbares Div mit reinem CSS?-CSS-Tutorial-php.cn

Wie erstelle ich mit und ein zusammenklappbares Div mit reinem CSS?

Barbara Streisand

Freigeben： 2024-11-01 00:49:02

Original

912 Leute haben es durchsucht

How to Create a Collapsible Div with Pure CSS using and ?

Reine CSS Collapsible Div-Lösung

Bei dieser Abfrage sucht ein Benutzer nach Anleitung zum Erstellen eines reinen CSS Collapsible Div, ähnlich dem Beispiel in die bereitgestellte jsfiddle. Sie zielen jedoch darauf ab, den CSS-Code zu minimieren und das Schreiben zahlreicher Selektoren für mehrere Frage-Antwort-Paare zu vermeiden.

Im Gegensatz zum ursprünglichen Ansatz, der auf der Pseudoklasse :target basiert, führt diese Abfrage die

und

HTML-Tags. Diese Tags sind ausschließlich für die Erstellung zusammenklappbarer Inhalte konzipiert.

Mit

und

: Definiert den Zusammenfassungstext, der zunächst sichtbar ist, bevor das Div erweitert wird.
: Schließt den reduzierbaren Inhalt ein, der ausgeblendet wird, bis auf die Zusammenfassung geklickt wird.

Beispiel:

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

Nach dem Login kopieren

Browser-Unterstützung

Browser-Unterstützung für die und

Tags ist vielfältig. Webkit-basierte Browser wie Chrome und Safari bieten optimale Unterstützung für diese Funktionalität. Andere Browser zeigen möglicherweise Standardverhalten, z. B. die Anzeige aller reduzierbaren Inhalte.

Fallback-Methode

Für Browser, die

und

Tags kann eine Fallback-Methode mit CSS in Betracht gezogen werden. Dies beinhaltet die Verwendung der Kombination aus der Pseudoklasse :target und der display-Eigenschaft, um die Sichtbarkeit des reduzierbaren Inhalts umzuschalten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit und ein zusammenklappbares Div mit reinem CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!