Wie erstelle ich ein zusammenklappbares Div mit minimalem CSS?

Reines CSS-Div zum Zusammenklappen/Erweitern mit minimalem Code

Das bereitgestellte zusammenklappbare CSS-Div mit der Pseudoklasse :target kann zum Erstellen einer Seite verwendet werden mit mehreren zusammenklappbaren Abschnitten effizient und ohne viel CSS. So geht's:

Mit der Pseudoklasse :target können Sie ein System einrichten, in dem jeder Frage eine eindeutige ID zugewiesen wird, z. B. „#q1“, „#q2“ usw. Wenn auf die entsprechende Schaltfläche „ “ geklickt wird, wird das Zielelement der ID angezeigt und das zugehörige Antwort-Div angezeigt.

CSS-Code:

<code class="css">.FAQ {
    vertical-align: top;
    height: auto !important;
}
.list {
    display: none;
    height: auto;
    margin: 0;
    float: left;
}
.show {
    display: none;
}
#wrapper > .hide:target + .show {
    display: inline;
}
#wrapper > .hide:target {
    display: none;
}
#wrapper > .hide:target ~ .list {
    display: inline;
}</code>

In In diesem Code wird der #wrapper verwendet, um alle Frage-Antwort-Paare zu gruppieren und sicherzustellen, dass der :target-Effekt auf diesen bestimmten Abschnitt beschränkt ist. Entfernen Sie es, wenn Sie lieber die gesamte Seite ändern möchten.

Beispielverwendung:

<code class="html"><div id="wrapper">
    <a href="#q1" class="hide" id="hide1">+</a>
    <a href="#q1show" class="show" id="show1"> -</a>
    <div class="question"> Question 1? </div>
    <div class="list">
        <p> Answer 1 </p>
    </div>
</div></code>

Wiederholen Sie dieses Muster für jede Frage und achten Sie dabei auf eindeutige IDs für jeden Satz von Elementen . Dadurch können Sie mit minimalem CSS-Code mehrere zusammenklappbare Abschnitte erstellen.

Browser-Unterstützung:

Beachten Sie, dass diese Lösung ausschließlich auf CSS3 basiert und möglicherweise nicht von unterstützt wird ältere Browser. Darüber hinaus kann die Verwendung von :target auf Seiten mit vielen reduzierbaren Abschnitten zu Leistungsproblemen führen.

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