Beispielcode zur Implementierung mobiler Expansions- und Collapse-Effekte mit reinem CSS3

<Abschnitt Klasse="Block">
    <Eingabetyp="Kontrollkästchen">
    <div Klasse="Fall-Block">
      <div>Erweitern</div>
      <div>Zusammenklappen</div>
    </div>
    <div Klasse="Detail">
      <div>Jijiji, Jijiji, Mulan webt am Fenster vorbei. Ich höre kein Geräusch des Webstuhls, nur dein Seufzen. (Wei Wentong: Wei) Fragen Sie sich, woran Sie denken, fragen Sie sich, woran Sie sich erinnern. Ich habe nichts, worüber ich nachdenken muss, und nichts, woran ich mich erinnern muss. Ich habe letzte Nacht einen Militärbefehl gesehen. Der Khan rekrutierte Soldaten. Es waren zwölf Bände mit Militärbüchern, und mein Name stand in jedem Band. Mein Vater hat keinen ältesten Sohn und Mulan hat keinen älteren Bruder. Ich bin bereit, ein Pferd und einen Sattel zu kaufen und von nun an für meinen Vater zu kämpfen. (Nur gehört: nur)
      <div>Gehen Sie zum Ostmarkt, um ein schönes Pferd zu kaufen, gehen Sie zum Westmarkt, um einen Sattel zu kaufen, gehen Sie zum Südmarkt, um ein Zaumzeug zu kaufen, und gehen Sie zum Nordmarkt, um eine lange Peitsche zu kaufen. Ich verließ meine Eltern am Morgen und blieb am Abend am Gelben Fluss. Ich hörte meine Eltern nicht rufen, sondern hörte nur das Geräusch des fließenden Gelben Flusses. Ich verließ den Gelben Fluss am Morgen und erreichte am Abend den Schwarzen Berg. Ich hörte nicht die Stimmen meiner Eltern, die mich riefen, sondern nur die Schreie der Hu-Kavallerie aus Yanshan. </div>
      <div>Reisen Sie Tausende von Kilometern zum Schlachtfeld und überqueren Sie Berge und Hügel wie im Flug. Die kalte Luft breitet sich durch die goldenen Wachtürme aus und das kalte Licht scheint auf die eiserne Rüstung. Der General starb in hundert Schlachten und der Krieger kehrte nach zehn Jahren zurück. </div>
      <div>Als er zurückkam, traf er den Kaiser, der im Mingtang saß. Zwölf Beförderungen für verdienstvolle Dienste und Belohnungen in Hunderttausenderhöhe. Der Khan fragte, was sie wolle. Mulan wollte keine Ministerin werden, sondern tausend Meilen weit reiten, um ihren Sohn in seine Heimatstadt zurückzuschicken. (Eine andere Version: Ich möchte mir die tausend Meilen langen Füße eines leuchtenden Kamels leihen)</div>
      <div>Als die Eltern hörten, dass ihre Tochter kam, verließen sie die Stadt, um ihr zu helfen. Als die ältere Schwester hörte, dass ihre jüngere Schwester kam, machte sie sich bereit, sich zu schminken. Als der jüngere Bruder hörte, dass seine ältere Schwester kam, schärfte er sein Messer, um Schweine und Schafe zu töten. Öffne die Tür meines Ostpavillons, setze dich auf mein Bett im Westpavillon, ziehe meine Kriegsrobe aus und ziehe meine alten Kleider an. Sie kämmt sich am Fenster die Haare und schminkt sich vor dem Spiegel. Als sie hinausging, um ihre Gefährten zu treffen, waren sie alle überrascht und sagten: „Wir sind seit zwölf Jahren zusammen, aber sie wussten nicht, dass Mulan ein Mädchen ist.“ (贴通：贴; 惊忙 auch geschrieben als 惶; 惶火伴通： 伙)</div>
     <div>Die Pfoten des männlichen Kaninchens sind verwirrt, die Augen der weiblichen Kaninchen sind verschwommen; zwei Kaninchen laufen nebeneinander, wie kann ich erkennen, welches männlich und welches weiblich ist? </div>
    </div>
  </Abschnitt>

@Zeichensatz "UTF-8";

.Titelblock {
    Höhe: 26px;
    Textausrichtung: zentriert;
}

.block {
    Anzeige: -webkit-box;
    Anzeige: -ms-flexbox;
    Anzeige: Flex;
    -webkit-box-orient: vertikal;
    -webkit-box-direction: umkehren;
    -ms-flex-flow:Spalte-umgekehrt nowrap;
    Flex-Flow: Spaltenumkehr-Nowrap;
    Breite: 360px;
    Rand: 0 automatisch;
    Schriftgröße: 14px;
    Farbe: #4C4C4C;
    Zeilenhöhe: 28px;
    Rand: 1px durchgezogen #999;
    Polsterung: 10px;
}

.block > .detail {
    maximale Höhe: 163px;
    Rand unten: 10px;
    Überlauf: versteckt;
}

.block > .case-block {
    Anzeige: -webkit-box;
    Anzeige: -ms-flexbox;
    Anzeige: Flex;
    -WebKit-Box-Pack: Mitte;
    -ms-flex-pack: Mitte;
    Inhalt ausrichten: zentriert;
    -webkit-box-align: zentriert;
    -ms-flex-align: zentriert;
    Elemente ausrichten: zentrieren;
    Breite: 120px;
    Höhe: 24px;
    Rand: 0 automatisch 0;
    Farbe: #0e0e0e;
    Hintergrund: #fff;
    Rand: 1px durchgezogen #0e0e0e;
    Rahmenradius: 5px;
}

.block > .case-block div:n-ter-Typ(1) {
    Anzeige: Block;
}

.block > .case-block div:n-ter-vom-Typ(2) {
    Anzeige: keine;
}

.block > [Typ="Kontrollkästchen"] {
    Position: relativ;
    Anzeige: Block;
    Breite: 120px;
    Höhe: 24px;
    Rand: -24px auto 0;
    Z-Index: 1000;
    Deckkraft: 0;
}

.block > [Typ="Kontrollkästchen"]:hover + .case-block {
    Hintergrundfarbe: #f5f5f5;
}

.block > [Typ="Kontrollkästchen"]:aktiviert + .case-block div:n-ter-Typ(1) {
    Anzeige: keine;
}

.block > [Typ="Kontrollkästchen"]:aktiviert + .case-block div:n-ter-Typ(2) {
    Anzeige: Block;
}

.block > [Typ="Kontrollkästchen"]:aktiviert + .case-block + .detail {
    max. Höhe: erben;
}