jQuery realisiert den Gleiteffekt des Dropdown-Menüs
|
Wenn wir eine Webseite erstellen, möchten wir manchmal ein cooles und ansprechendes Dropdown-Menü haben. Obwohl wir zur Erstellung die einfachsten CSS- und JS-Elemente verwenden können, benötigen wir mit jQuery nur sehr kurze Codes, um den folgenden Effekt zu erzielen.
Ist es nicht sehr glatt? Wenn die Maus zum Ziel bewegt wird, wird automatisch ein Dropdown-Menü angezeigt. Es sind nur zwei Codezeilen erforderlich:
$(" ").hover(Funktion() {
$(diese).children(" ").slideToggle();
});Unter ihnen ist Hover eine zusammengesetzte Formulierung aus dem Vorbeigehen und Verlassen der Maus, die normalerweise so geschrieben wird
$(" ").hover(Funktion() {
$(this).children(" ").slideDown() );
}, Funktion() {
$(this).children(" ").slideUp() );
});Das heißt, schreiben Sie zwei Funktionen in Hover, eine für den Fall, dass die Maus darüberfährt, und die andere für den Fall, dass die Maus das Objekt verlässt, und trennen Sie die beiden durch ein Komma. Sie können jedoch sehen, dass ich im obigen Code nur eine Funktion geschrieben habe. Das liegt daran, dass, wenn wir nur eine Funktion in Hover schreiben, der Effekt wiederholt wird, wenn die Maus darüberfährt oder das Objekt verlässt, was einfacher zu schreiben ist. Verwenden Sie es im Gesamtcode wie folgt:
<!DOCTYPE html>
<Kopf>
<meta charset="UTF-8">
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
li {
Listenstiltyp: keiner;
}
A {
Textdekoration: keine;
Schriftgröße: 20px;
}
.nav {
Rand: 100px;
}
.nav>li {
Position: relativ;
schweben: links;
Breite: 80px;
Höhe: 50px;
Textausrichtung: zentriert;
}
.nav li ein {
Anzeige: Block;
Breite: 100 %;
Höhe: 100%;
Zeilenhöhe: 50px;
Farbe: Schwarz;
Rand: 1px, durchgehend himmelblau;
}
.nav>li>a:hover {
Hintergrundfarbe: rosa;
}
.nav ul {
Anzeige: keine;
Position: absolut;
oben: 50px;
links: 0;
Breite: 100 %;
Rahmen links: 1px durchgezogen #FECC5B;
Rahmen rechts: 1px durchgezogen #FECC5B;
}
.nav ul li {
Rahmen unten: 1px durchgezogen #FECC5B;
}
.nav ul li a:hover {
Hintergrundfarbe: #FFF5DA;
}
</Stil>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</Kopf>
<Text>
<ul Klasse="Navigation">
<li>
<a href="#" >Nachricht</a>
<ul>
<li>
<a href="">Folgen</a>
</li>
<li>
<a href="">Kommentare</a>
</li>
<li>
Wie
</li>
</ul>
</li>
<li>
<a href="#" >Nachricht</a>
<ul>
<li>
<a href="">Folgen</a>
</li>
<li>
<a href="">Kommentare</a>
</li>
<li>
Wie
</li>
</ul>
</li>
<li>
<a href="#" >Nachricht</a>
<ul>
<li>
<a href="">Folgen</a>
</li>
<li>
<a href="">Kommentare</a>
</li>
<li>
Wie
</li>
</ul>
</li>
</ul>
<Skript>
$(Funktion() {
$(".nav>li").hover(Funktion() {
$(this).children("ul").slideToggle();
});
})
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Öffentliche kostenlose STUN-Server
>>: Detaillierte Schritte zur Neuinstallation von VMware Tools (grafisches Tutorial)
Artikel empfehlen
So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden
So geben Sie das übergeordnete Verzeichnis an ../ ...
Ändern des Standarddatenverzeichnisses von MySQL 8.0 (schneller Vorgang ohne Konfiguration)
Nutzungsszenario: Wir verwenden Alibaba Cloud und...
Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)
2.1 Semantisierung sorgt dafür, dass Ihre Webseit...
So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit
NextCloud Sie können beliebige Dateien oder Ordne...
Eingabetyp begrenzen (mehrere Methoden)
1. Es können nur chinesische Schriftzeichen eingeg...
Über React Native, das keine Verbindung zum Simulator herstellen kann
React Native kann native iOS- und Android-Apps ba...
Eine kurze Analyse der startReactApplication-Methode von React Native
In diesem Artikel haben wir den Startvorgang von ...
Detaillierte Erläuterung von drei Beziehungsbeispielen für MySQL-Fremdschlüssel
Dieser Artikel beschreibt anhand von Beispielen d...
Probleme mit Vue, das die Homepage von Bibibili imitiert
Technische Struktur Das Projekt ist in zwei Teile...
Detaillierte Erklärung der Listendarstellung von Vue
Inhaltsverzeichnis 1. v-for: Array-Inhalte durchl...
Vergleich der Verwendung von EXISTS und IN in MySQL
1. Verwendung: (1) EXISTS-Nutzung Wählen Sie a.ba...
Centos7.3 startet oder führt beim Booten automatisch angegebene Befehle aus
In CentOS7 wurden die Berechtigungen der Datei /e...
MySQL-Serververbindung, Trennung und cmd-Bedienung
Verwenden Sie den Befehl mysql, um eine Verbindun...
Das Bildelement img hat in IE6 zusätzlichen Leerraum
Beim Erstellen eines DIV+CSS-Layouts einer Seite ...
Erstellen eines Redis-Clusters auf Docker
Inhaltsverzeichnis 1. Ziehen Sie das Bild 2. Erst...