Wie kann ich reduzierbare DIVs mit reinem HTML und CSS erstellen?

Zusammenklappbare DIVs mit HTML, CSS

Suchen Sie nach einer Methode, um ausblendbare und zusammenklappbare DIV-Elemente zu erstellen, ohne auf jQuery angewiesen zu sein? Dieses Problem tritt häufig beim Design mobiler Websites auf, insbesondere wenn der Offline-Zugriff von entscheidender Bedeutung ist. Mit reinem HTML und CSS ist diese Funktionalität möglich.

Lösung:

Mit HTML5

und Tags ist eine praktikable Lösung:

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

Dieser Ansatz nutzt die native Funktionalität von HTML5, ohne dass zusätzliches JavaScript oder CSS-Styling erforderlich ist. Die

-Tag stellt einen zusammenklappbaren Behälter dar, während das

Tag definiert seinen interaktiven Header. Durch Klicken auf die Schaltfläche -Tag schaltet die Sichtbarkeit des Inhalts innerhalb der

Tag.

Das obige ist der detaillierte Inhalt vonWie kann ich reduzierbare DIVs mit reinem HTML und CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!