Heim > Artikel > Web-Frontend > Wie erstelle ich mehrere zusammenklappbare Divs in reinem CSS ohne umfangreichen Code?
Frage:
Wie können Sie in reinem CSS erstellen? mehrere reduzierbare div-Elemente, ohne für jedes Element umfangreichen Code zu schreiben?
Kontext:
Der bereitgestellte Code verwendet die :target-Pseudoklasse, um ein einzelnes div zu reduzieren und zu erweitern. Die Notwendigkeit, zahlreiche ähnliche div-Elemente zu erstellen, erfordert jedoch eine große Menge an CSS.
Lösung:
Ein alternativer Ansatz besteht darin, die Funktion
Details:
Durch die Verschachtelung dieser Tags können Sie ganz einfach erweiterbare Abschnitte ohne CSS erstellen:
<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>
Browser-Unterstützung:
Die Browser-Unterstützung variiert. Webkit (z. B. Safari, Chrome) bietet die besten Ergebnisse. In anderen Browsern werden die Details möglicherweise immer angezeigt.
Fallback:
Wenn
Das obige ist der detaillierte Inhalt vonWie erstelle ich mehrere zusammenklappbare Divs in reinem CSS ohne umfangreichen Code?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!