Die Dropdown -Komponente in der Bootstrap -Navigationsleiste wird sehr häufig verwendet. In diesem Artikel wird das HOVER -Ereignis der Dropdown -Komponentenerweiterung in Bootstrap vorgestellt. Der spezifische Inhalt ist wie folgt
Wie implementieren Sie dieses Schwebereignis? Tatsächlich ist es auf der Grundlage des Click -Ereignisses der Dropdown -Komponente einfach zu vervollständigen. Diejenigen, die vorsichtig sind, können feststellen, dass sein übergeordnetes über ein offenes Klassenattribut, wenn das Dropdown-Box angezeigt wird. Wir müssen die offene Klasse nur dem übergeordneten Ereignis hinzufügen oder löschen.
boostrap-hover-dropdown.js Plugin, Code-URL auf GitHub: Ansicht
Hier ist der vollständige JS -Plugin -Code:
// Bootstrap Responsive Navigationsleiste <br>; (Funktion ($, Fenster, undefiniert) {// außerhalb des Geltungsbereichs des Jquery -Plugins zu // Verfolgerung aller Dropdowns var $ alldropdowns = $ (); // If InstantlyCloseothers ist wahr, dann wird es sofort geschlossen. Pflege // ist der übergeordnete Dropdown-Toggle $ alldropdowns = $ alldropdowns.add (this.Parent ()); $ (this) .data ('Close-mothan')}, Optionen = $ .extend (true, {}, Standards, Optionen, Daten), Timeout; function () {timeout = windel.settimeout (function () {$ this.removeclass ('open');Sie können sehen, dass der Autor ein Semikolon vor dem Plug-In hinzugefügt hat, was die Kompatibilität des Plug-In erhöht, da der vorherige JS-Code möglicherweise nicht geschrieben wird. Wenn das Semikolon hier nicht hinzugefügt wird, kann dies zu einem JS -Fehler führen, da es keine Zeilenunterbrechung gibt.
Optionale Parameter
Verzögerung: (Optionaler Parameter) Verzögerung in Millisekunden. Dies ist die Zeit zum Schließen des Pulldowns, bevor sich die Maus nicht mehr im Dropdown-Menü oder im Taste/Navigationselement befindet. Aktivieren Sie sie. Der Standardwert beträgt 500.
SofortCloseothers: (optionaler Parameter) Ein boolescher Wert schließt, falls wahr, alle anderen Dropdown-Menüs sofort schließen, wenn Sie eine neue Navigation für den Selektor starten. Der Standardwert ist wahr.
Nach dem Hinzufügen des obigen JS-Code kann der Effekt zu diesem Zeitpunkt nicht realisiert werden, da wir einen weiteren Schritt ausführen müssen, nämlich Datenattribute zum Element hinzuzufügen:
Data-hover = "Dropdown"
Füllen Sie den HTML -Elementcode aus:
Kopieren Sie den Code wie folgt: <a href = "JavaScript:;" Data-Toggle = "Dropdown" data-hover = "Dropdown"> </a>
Optionen können über Datenattribute oder über Datenverzögerungs- und Daten-Clase-andere eingestellt werden
Kopieren Sie den Code wie folgt: <a href = "#" data-toggle = "Dropdown" data-hover = "Dropdown" data-delay = "1000" data-close-ther = "false"> </a>
Natürlich gibt es auch den einfachsten Weg, CSS -Schwebungen zur Kontrolle zu verwenden
[/code] .nav> li: hover .dropdown-menu {display: block;} [/code]
Diese Art von Code kann auch den gewünschten Hover -Effekt erzielen. Wenn Sie jedoch beim Schweben auf die Komponente klicken und dann zu einer anderen Komponente gehen, wird der folgende Effekt angezeigt:
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Die obige Methode ist die Methode zur Verwendung der Bootstrap -Dropdown -Komponente, die Sie mit Ihnen geteilt haben. Ich hoffe, es wird für Sie hilfreich sein, die Hover -Veranstaltung zu beherrschen.