Wie kann ich die Div-Sichtbarkeit nur mit HTML und CSS umschalten?

Anzeige von Divs beim Klicken mithilfe von HTML und CSS umschalten

In diesem Artikel möchten wir eine Lösung für die Herausforderung bieten Anzeigen und Ausblenden von Divs beim Klicken mithilfe von HTML- und CSS-Techniken, ohne die Abhängigkeit von JavaScript-Bibliotheken wie z jQuery.

Mit HTML5-Elementen

Durch die Nutzung der HTML5-Tags detail und summary können Sie zusammenklappbare Div-Elemente erreichen Funktionalität ohne zusätzliches Styling oder Scripting. Diese Tags bieten native Unterstützung für die Erstellung reduzierbarer Abschnitte:

<details><br> <summary>Collapse 1</summary><br> <p>Content 1...</p><br></details><br><details><br> <summary>Ausblenden 2</summary><br> <p>Inhalt 2...</p><br></details><br>

Zusätzliches CSS für Styling

While Da der obige Ansatz das kollabierbare Verhalten behandelt, möchten Sie möglicherweise das visuelle Erscheinungsbild Ihrer Divs verbessern. Hier ist ein Beispiel für ein CSS-Snippet:

details {
 border: 1px solid #ccc;
 margin-top: 10px;
 padding: 10px;
}
Zusammenfassung {
Hintergrund: #eee;
Cursor: Zeiger;
 Polsterung: 5 Pixel;
 Anzeige: Block;
 
Durch die Implementierung dieser Techniken können Sie effektiv zusammenklappbare Abschnitte in HTML und CSS erstellen, ohne dass jQuery oder anderes JavaScript erforderlich ist Bibliotheken.
Das obige ist der detaillierte Inhalt vonWie kann ich die Div-Sichtbarkeit nur mit HTML und CSS umschalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!