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 Tags
Ein effizienterer Ansatz ist die Implementierung des HTML5 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 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
