Wie erstelle ich zusammenklappbare Divs mit HTML5 „“ und „“?

„So erstellen Sie zusammenklappbare Divs mit HTML und CSS“

Zusammenklappbare Divs werden häufig verwendet, um dynamische und organisierte Inhalte auf einer Webseite darzustellen . Typischerweise enthalten diese Divs einen Header und einen versteckten Textkörper, der bei Benutzerinteraktion erweitert und reduziert werden kann. Das Erstellen zusammenklappbarer Divs ausschließlich mit CSS kann praktisch sein, insbesondere um eine saubere und unkomplizierte Codebasis aufrechtzuerhalten.

Die :target-Pseudoklasse

Frühere Ansätze für zusammenklappbare CSS-Divs waren beteiligt Verwendung der Pseudoklasse :target, die Stile aktiviert, wenn ein bestimmtes Element durch ein Zielattribut verknüpft ist (z. B. ). Diese Technik erfordert jedoch erhebliche Wiederholungen für mehrere reduzierbare Elemente, was zu einem aufgeblähten CSS-Code führt.

Der HTML5-Code

und Tags

Eine alternative und elegante Lösung liegt im HTML5

und Tags. Die Das Element stellt den umschaltbaren Header dar, während das Element

Das Element kapselt den reduzierbaren Inhalt. Dieser Ansatz macht benutzerdefiniertes JavaScript oder komplexes CSS überflüssig und vereinfacht den Prozess der Erstellung zusammenklappbarer Divs erheblich.

Beispielcode

Hier ist ein Beispiel, um die Verwendung von < zu demonstrieren ;Details> und :

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>

Browserkompatibilität

Während die

und Da Tags eine praktische Lösung bieten, muss die Browserkompatibilität berücksichtigt werden. Sie werden in modernen Browsern unterstützt, einschließlich Chrome, Firefox und Safari; Allerdings rendern möglicherweise nicht alle Browser es mit dem gleichen Verhalten.

Für eine umfassende Browserunterstützung können Sie bei Bedarf eine Polyfüllung wie details-polyfill verwenden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich zusammenklappbare Divs mit HTML5 „“ und „“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!