jQuery verwendet die Funktionen hide() und toggle(), um die Funktion zum Ausblenden der Kameramarkenanzeige zu realisieren
|
Als ich kürzlich jQuery lernte, stieß ich auf die Funktionen show(), hide() und toggle(). Also habe ich diese Funktionen verwendet, um das Anzeigen und Ausblenden von Elementen zu üben: Tipp: Die kleinen Symbole zum Auf- und Abschalten der Tasten im Code können Sie dem Bild der Markenanzeigefunktion unter diesem Link entnehmen
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Verwenden Sie die Funktionen hide() und toggle(), um Kameramarken anzuzeigen</title>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
Körper {
Schriftgröße: 12px;
Textausrichtung: zentriert;
}
A {
Farbe: #04D;
Textdekoration: keine;
}
ein:schweben {
Farbe: #F50;
/*Das Textdekorationsattribut gibt die dem Text hinzugefügte Dekoration an, z. B. Unterstreichen, Überstreichen, Durchstreichen usw. */
Textdekoration: Unterstreichen;
}
.UnterkategorieBox {
Breite: 600px;
Rand: 0 automatisch;
Textausrichtung: zentriert;
Rand oben: 40px;
}
.SubCategoryBox ul {
Listenstil: keiner;
}
.SubCategoryBox ul li {
Anzeige: Block;
schweben: links;
Breite: 200px;
Zeilenhöhe: 20px;
}
.mehr anzeigen, .weniger anzeigen {
klar: beides;
Textausrichtung: zentriert;
Polsterung oben: 10px;
}
.showmore ein, .showless ein {
Anzeige: Block;
Breite: 120px;
Rand: 0 automatisch;
Zeilenhöhe: 24px;
Rand: 1px durchgezogen #AAA;
}
.showmore eine Spanne {
Polsterung links: 15px;
/*Die letzten beiden Ziffern sind der Offset von der oberen linken Ecke (0,0). Die erste Ziffer ist der Offset auf der X-Achse, also der horizontale Offset. Positiv bedeutet rechts, negativ bedeutet links!
Die zweite Zahl ist der Versatz auf der Y-Achse, also der horizontale Versatz, positiv bedeutet nach unten, negativ bedeutet nach oben!*/;
Hintergrund: URL (img/down.gif) keine Wiederholung 0 3px;
}
.showless eine Spanne {
Polsterung links: 15px;
Hintergrund: URL (img/up.gif) keine Wiederholung 0 3px;
}
.förderte ein {
Farbe: #F50;
}
</Stil>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<Skripttyp="text/javascript">
$(Funktion () {
//Nachdem die Seite geladen wurde, zuerst einige Kameramarken ausblenden $("ul li:gt(5):not(:last)").hide();
// Die Filterfunktion filtert die Menge der Elemente heraus, die dem angegebenen Ausdruck entsprechen. Mit dieser Methode wird der Übereinstimmungsbereich eingegrenzt. Verwenden Sie Kommas, um mehrere Ausdrücke zu trennen // Hier filtern wir die Kameramarken heraus, die separat formatiert werden müssen var multiPromoted = $("li").filter(":contains('Canon'),:contains('Sony'),:contains('Kodak')");
// Holen Sie sich das Klickereignis, das die Tag-Bindung eines Tags enthält $("div div a").click(function () {
// Zwischen dem Anzeigen und Ausblenden einiger Kameramarken wechseln$("ul li:gt(5):not(:last)").toggle();
// Ersetze Textinhalte, hochgestellte Bilder und entferne den Textstil des a-Tags unter li, wenn einige Kameramarken ausgeblendet werden, if ($("ul li:gt(5):not(:last)").is(":hidden")) {
$("a > span").html("Alle Marken anzeigen");
$("div div").removeClass();
$("div div").addClass("mehr anzeigen");
$(multiPromoted).removeClass("gefördert");
} anders {
// Ersetzen Sie beim Anzeigen einiger Kameramarken den Textinhalt und das hochgestellte Bild und fügen Sie den Textstil „a“ des Tags unter li$("a > span").html("Vereinfachte Marken anzeigen"); hinzu.
$("div div").removeClass();
$("div div").addClass("ohne Anzeige");
$(multiPromoted).addClass("gefördert");
}
});
});
</Skript>
</Kopf>
<Text>
<div Klasse="UnterkategorieBox">
<ul>
<li><a href="#">Canon</a><i>(30440) </i></li>
<li><a href="#">Sony</a><i>(27220) </i></li>
<li><a href="#">Samsung</a><i>(20808) </i></li>
<li><a href="#">Nikon</a><i>(17821) </i></li>
<li><a href="#">Panasonic</a><i>(12289) </i></li>
<li><a href="#">Casio</a><i>(8242) </i></li>
<li><a href="#">Fuji</a><i>(14894) </i></li>
<li><a href="#">Kodak</a><i>(9520) </i></li>
<li><a href="#">Pentax</a><i>(2195) </i></li>
<li><a href="#">Ricoh</a><i>(4114) </i></li>
<li><a href="#">Olympus</a><i>(12205) </i></li>
<li><a href="#">BenQ</a><i>(1466) </i></li>
<li><a href="#">Patriot</a><i>(3091) </i></li>
<li><a href="#">Kameras anderer Marken</a><i>(7275) </i></li>
</ul>
<div Klasse="mehr anzeigen">
<a href="#"><span>Alle Marken anzeigen</span></a>
</div>
</div>
</body>
</html>Effekt der Codeausführung:
Funktionsanzeigeeffekt:
Dies ist das Ende dieses Artikels darüber, wie jQuery die Funktionen hide() und toggle() verwendet, um Kameramarken anzuzeigen und auszublenden. Weitere Informationen darüber, wie jQuery die Funktionen hide() und toggle() verwendet, um Kameramarken anzuzeigen und auszublenden, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Eine vollständige Aufzeichnung eines Mysql-Deadlock-Fehlerbehebungsprozesses
>>: So erstellen und führen Sie ein Django-Projekt in Ubuntu 16.04 unter Python 3 aus
Artikel empfehlen
So verwenden Sie Portainer zum Erstellen einer visuellen Schnittstelle für Docker
Portainer-Einführung Portainer ist ein grafisches...
Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.
Fragen zu Select-Elementen in HTML wurden an viel...
Grundkenntnisse zu MySQL – Lernhinweise
Datenbank anzeigen show databases; Erstellen eine...
Lösen Sie das MySQL-Problem: Die Codeausführung kann nicht fortgesetzt werden, da MSVCR120.dll nicht gefunden wurde
1. Problem Die bei der Initialisierung von MySQL ...
MySQL Series 10 MySQL-Transaktionsisolierung zur Implementierung der Parallelitätskontrolle
Inhaltsverzeichnis 1. Gleichzeitige Zugriffskontr...
Tutorial zur Installation von Android Studio unter Ubuntu 19 und darunter
Aus Erfahrung weiß man, dass es eine gute Angewoh...
Problem mit der Parameterübergabe beim Sprung auf HTML-Seite
Die Wirkung ist wie folgt: eine Seite Nach dem Kl...
Welche Nachteile hat die Bereitstellung der Datenbank in einem Docker-Container?
Vorwort Docker erfreut sich seit zwei Jahren groß...
Installationshandbuch für VMware Workstation 15 Pro (für Anfänger)
01. VMware Workstation Pro 15 herunterladen Herun...
CSS horizontale Zentrierung und Begrenzung der maximalen Breite
Eine CSS-Layout- und Stilfrage: Wie kann man die ...
So stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit
In diesem Artikel werden Docker Container (orches...
Vue3 AST Parser-Quellcode-Analyse
Inhaltsverzeichnis 1. Generieren Sie einen abstra...
Zusammenfassung gängiger SQL-Anweisungen in MySQL
1. MySQL-Exportdatei: SELECT `pe2e_user_to_compan...
Detaillierte Anwendung des dynamischen Vue-Formulars
Überblick Es gibt viele Formularanforderungen im ...
Mehrere Implementierungsmethoden sowie Vor- und Nachteile der SQL-Paging-Abfrage in MySQL
【SQL】 Zusammenfassung der SQL-Paging-Abfragen Wäh...