„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
Eine alternative und elegante Lösung liegt im HTML5
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
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!