Responsive Navigationsleisten werden verwendet, wenn Bootstrap verwendet wird, um den Hintergrund zu erstellen. Unter ihnen wird die Dropdown -Komponente häufiger verwendet. Je mehr Sie es verwenden, desto mehr müssen Sie klicken. Die Dropdown -Stellungnahme wird standardisiert, um die linke Maustaste zu erweitern. Wenn Sie die Maus verwenden, um sie zu erweitern (schweben), speichert sie die Klickzeit, wodurch die Effizienz verbessert wird.
Die ursprüngliche Transformationsidee lautet: Binden Sie das HOVER -Ereignis an das Dropdown -Element. Wenn der Schwebedruck steigt, synchronisieren Sie den Schwebezeug als Klick, und der Schwebedruck wird auf das Element des Elements ausgeführt.
Aber ich denke, es ist besser, online zu suchen, um zu sehen, ob es vorbereitete Plugins gibt, anstatt es selbst umzubauen. Sicher genug, ich habe es gesucht und die Code -URL auf GitHub gehostet: Ansicht
Kopieren Sie hier einfach den Code:
; (Funktion ($, Fenster, undefiniert) {// außerhalb des Geltungsbereichs des jQuery-Plugins zu // Verfolgung aller Dropdownsvar $ alldropdowns = $ (); // Wenn sofort umclosetothothers wahr ist, dann wird es sofort zu einer Schließung anderer NAV-Elemente geschlossen, wenn eine neue NAV-Elemente über $. Eltern $ alldropdowns = $ alldropdowns.add (this.Parent ()); zurückgegeben. $ .extend (true, {}, Standardeinstellungen, Optionen, Daten), Timeout; $ this.hover (function () {if (options.instantcloseothers === true) $ alldropdowns.removeclass ('open'); {$ this.removeclass ('open');}, options.delay);});});}); $ ('[data-hover = "Dropdown"].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.
Das Plug-In unterstützt die Übertragung von HTML-Elementdaten-* Parameterübertragung und unterstützt auch die Initialisierungsparameterübertragung. Stellen Sie diesen JS -Code einfach hinter den ursprünglichen JS -Code in Bootstrap.
Das obige ist die Einführung des Editors, um das Dropdown-Dropdown-Menü in Bootstrap zu ändern, um den Auslöser zu schweben. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!