Wie erstelle ich mehrere zusammenklappbare Divs mit minimalem CSS?

Pure CSS Collapse and Expand Div

Anpassen mehrerer zusammenklappbarer Divs mit minimalem CSS

Das vorliegende Problem ist das Erstellen mehrere reduzierbare Divs auf einer einzelnen Seite, ohne den CSS-Code durch übermäßige Selektoren aufzublähen. In diesem Fall verwendet der bereitgestellte Code die :target-Pseudoklasse, erfordert jedoch einen eindeutigen Selektor für jede Frage.

Lösung: Umfassen der

und

Tags

Ein effizienterer Ansatz ist die Implementierung des HTML5 und

Tags. Diese Tags wurden speziell zum Erstellen ein- und erweiterbarer Inhaltselemente entwickelt.

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

Browserkompatibilität

Browserunterstützung für die

und

Tags sind in Ordnung, variieren aber. WebKit-basierte Browser liefern die besten Ergebnisse. Andere Browser zeigen möglicherweise standardmäßig den gesamten reduzierbaren Inhalt an, Sie können jedoch eine Ausweichoption in Betracht ziehen, indem Sie die im Originalcode beschriebene Ein-/Ausblenden-Methode verwenden.

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