Des barres de navigation réactives sont utilisées lors de l'utilisation de bootstrap pour créer l'arrière-plan. Parmi eux, le composant déroulant est utilisé plus souvent. Plus vous l'utilisez, plus vous devez cliquer. La liste déroulante est par défaut pour étendre le bouton gauche de la souris. Si vous utilisez la souris pour l'agrandir (planer), cela économisera le temps de clic, ce qui peut améliorer l'efficacité.
L'idée de transformation originale est: lier l'événement de survol à l'élément déroulant. Lorsque le volant monte, exécutez l'événement de clic de l'élément - c'est-à-dire, synchronisez le survol en clic, et le survol est un clic.
Mais pensant qu'au lieu de le rénover vous-même, il est préférable de rechercher en ligne pour voir s'il y a des plugins prêts à l'emploi. Effectivement, je l'ai recherché et l'URL du code hébergé sur github: View
Copie le code ici:
(fonction ($, fenêtre, indéfini) {// en dehors de la portée du plugin jQuery vers // garder une trace de tous les dropdownsvar $ alldropdowns = $ (); // si instantanément les autres sont vraies, alors il sera instantanément // fermera les autres éléments de navigation lorsqu'un élément qui se soucie de $. Parent $ AllDropdowns = $ allDropdown.Add (this.parent ()); return this.each (function () {var $ this = $ (this) .parent (), defaults = {delay: 500, instantanément CLOSEAUX: true}, data = {delay: $ (this) .data ('delay'), instantanément Close Mothers: $ (this) .data ('close-}), Options = $ ($ (this) .data (' closer-}), Options = $ ($ (this) .data ('close-}) $ .Extend (true, {}, paramètres par défaut, options, données), tempsout; $ this.hover (function () {if (options.instlycloseothers === true) $ alldropdows.removeclass ('open'); window.clEartimeout (tempsout); $ (this) .addclass ('open');}, function () {timeout = window {$ this.reMoveClass ('open');}, options.delay);});});}); $ ('[data-hover = "dropdown"]'). dropdownhover ();}) (jQuery, this);Vous pouvez voir que l'auteur a ajouté un point-virgule devant le plug-in, ce qui augmente la compatibilité du plug-in, car le code JS précédent peut ne pas être écrit; Si le point-virgule n'est pas ajouté ici, cela peut provoquer une erreur JS car il n'y a pas de rupture de ligne.
Le plug-in prend en charge le transfert de paramètre des éléments HTML et prend également en charge le transfert de paramètres d'initialisation. Placez simplement ce code JS derrière le code JS d'origine dans Bootstrap.
Ce qui précède est l'introduction de l'éditeur pour modifier le menu déroulant déroulant dans Bootstrap to Hover Trigger. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!