Reines CSS zum Erreichen der Funktion „Klicken zum Erweitern und Lesen des Volltexts“

Notiz

Beim Entwickeln einer Benutzeroberfläche für die Anzeige einer Artikelliste möchten Sie möglicherweise einen Teil des Inhalts der Artikelüberschrift anzeigen, um einen grundlegenden Überblick über die Informationen zu bieten, und eine Schaltfläche mit der Aufschrift 【點擊展開閱讀全文】 um ausführliche Informationen zu erhalten.

Im Artikel caibaojian.com/css-tonggle… wurde auf die Idee von reinem CSS verwiesen. Der im Artikel beschriebene Inhalt ist jedoch auf die Wirkung eines einzelnen Artikels anwendbar und ist nicht benutzerfreundlich, wenn <li></li> -Tags zum Generieren von Tabellendaten verwendet werden. Daher wurde auf dieser Grundlage eine entsprechende Optimierung durchgeführt. Der spezifische Code lautet wie folgt:

<div>
    <ul id="Inhalt-ul">
        <!-- Dies ist der Hauptteil des LI-Tags, der den Artikelinhalt speichert-->
    </ul>
</div>

[id^="Fortsetzung"] {
    Anzeige: keine;
}

.inhalt-mehr {
    Anzeige: keine;
}

[id^="contTab"]:aktiviert ~ #Inhalt {
    maximale Höhe: 95px;
    Überlauf: versteckt;
}

[id^="contTab"]:aktiviert ~ .content-more {
    Anzeige: Block;
    Position: relativ;
    Textausrichtung: zentriert;
}

[id^="contTab"]:aktiviert ~ .content-more .gradient {
    Hintergrundbild: -webkit-gradient(linear, links oben, links unten, von(rgba(255, 255, 255, 0)), bis(#fff));
    Hintergrundbild: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff);
    Hintergrundbild: linearer Farbverlauf (-180 Grad, RGBA (255, 255, 255, 0), #fff);
    Höhe: 80px;
    Position: absolut;
    links: 0;
    oben: -79px;
    Breite: 100 %;
}

[id^="contTab"]:aktiviert ~ .content-more .readmore {
    Anzeige: Inline-Block;
    Hintergrund: #319a1717;
    Farbe: #0014ff9e;
    Breite: 300px;
    Höhe: 30px;
    Rahmenradius: 32px;
    Zeilenhöhe: 32px;
    Schriftgröße: 14px;
    Cursor: Zeiger;
    Texteinzug: 0;
}

Natürlich ist hier ein Stück JS-Code:

Funktion inner(Antwort) {
    für (var val von response.data) {
        document.getElementById('content-ul').innerHTML += '' +
            '<li>' +
            '<h2 Klasse="Titel">' + Wert.Titel + '</h2>' +
            '<p class="update_author">' + val.author_name + ' / ' + layui.util.toDateString(val.update, "yyyy-MM-dd HH:mm:ss") + '</p>' +
            '<input type="checkbox" id="contTab_' + val.id + '" aktiviert="aktiviert" class="tabbed">' +
            '<div id="Inhalt">' + val.Inhalt + '</div>' +
            '<div class="content-more"><div class="gradient"></div> <label for="contTab_' + val.id + '" class="readmore">Klicken Sie hier, um den vollständigen Text zu lesen</label></div>' +
            '</li>'
    }
}

veranschaulichen

Die Verbesserungsmethode besteht darin, das gebundene Tag-ID-Attribut dynamisch zu generieren und zu binden und dann den CSS-Selektor zu verwenden, wobei eine Fuzzy-Matching-Methode verwendet wird, die nicht auf einen bestimmten ID-Selektor beschränkt ist.

Quellcode

Dieser Codeausschnitt wird im M&OAS-Projekt verwendet. Sie können hier klicken, um die relevanten Codeinformationen anzuzeigen und einen vollständigeren Code zu erhalten.

PS: Wenn Sie nach der Eingabe feststellen, dass kein relevanter Codeblock vorhanden ist, geraten Sie nicht in Panik. Möglicherweise habe ich ihn noch nicht auf GITHU hochgeladen. Bitte verzeihen Sie mir QAQ ~

Das Gehirn ist eine gute Sache, hahahaha~

Dies ist das Ende dieses Artikels über die Implementierung der Funktion [zum Erweitern und Lesen des vollständigen Textes klicken] mit reinem CSS. Weitere relevante CSS-Inhalte zum Erweitern und Lesen des vollständigen Textes finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!