Wenn es um das Umschalten des CSS-Status geht, kann jeder an den Eingabetyp = „Checkbox“ denken. Auch hier müssen wir diese Funktion verwenden, zuerst eine Eingabe hinzufügen, dann die vorherige Schaltfläche durch eine Beschriftung ersetzen und sie über das for-Attribut verknüpfen!
<div class="wrap">
<input type="checkbox" id="exp">
<div class="text">
<label class="btn" for="exp">展开</label>
浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>
</div>
Wenn Sie also auf die Beschriftung klicken, klicken Sie tatsächlich auf das Eingabeelement. Fügen wir nun zwei Zustände hinzu, die nur drei Zeilen anzeigen und keine Begrenzung der Zeilenanzahl haben.
.exp:checked+.text{
-webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
Die kompatible Version kann die maximale Höhe direkt auf einen größeren Wert oder direkt auf „Keine“ setzen
.exp:checked+.text{
max-height: none;
}
Hier gibt es noch ein kleines Problem. Die Schaltfläche „Erweitern“ sollte sich nach dem Klicken in „Reduzieren“ ändern. Wie kann ich sie ändern?
Es gibt einen Trick: Jeder, der den Inhalt dynamisch ändern muss, kann die Pseudoklassen-Inhaltsgenerierungstechnologie verwenden. Die spezifische Methode besteht darin, den Text in der Schaltfläche zu entfernen oder auszublenden und ihn mit Pseudoelementen zu generieren!
<label class="btn" for="exp"></label><!--去除按钮文字-->
.btn::after{
content:'展开' /*采用content生成*/
}
Hinzufügen: Status geprüft
.exp:checked+.text .btn::after{
content:'收起'
}
Kompatible Version Da die vorherigen Auslassungspunkte simuliert werden, können sie nicht automatisch ausgeblendet werden, sodass eine zusätzliche Verarbeitung erforderlich ist
.exp:checked+.text .btn::before {
visibility: hidden; /*在展开状态下隐藏省略号*/
}
Sehen Sie sich den vollständigen Code an und erleben Sie den Effekt [Mehrzeilige Codepen-Anzeige einklappen]