Las barras de navegación receptivas se usan al usar Bootstrap para crear el fondo. Entre ellos, el componente desplegable se usa con más frecuencia. Cuanto más lo use, más necesitará hacer clic. El desplegable predeterminado es expandir el botón izquierdo del mouse. Si usa el mouse para expandirlo (desplazamiento), ahorrará la hora de hacer clic, lo que puede mejorar la eficiencia.
La idea de transformación original es: BIND el evento Hover al elemento desplegable. Cuando suba el flotador, ejecute el evento de clic del elemento, es decir, sincronice el flotante como un clic, y el flotador es clic.
Pero pensando que en lugar de remodelarlo usted mismo, es mejor buscar en línea para ver si hay algún complemento listo. Efectivamente, lo busqué y la URL de código alojada en GitHub: Ver
Aquí, solo copia el código:
; (función ($, ventana, indefinida) {// fuera del alcance del complemento jQuery a // realizar un seguimiento de todos los desplegables $ alldropdowns = $ (); // Si instantáneamente ClooseThs es verdadero, entonces instantáneamente // cerrará otros elementos de NAV cuando un nuevo se cierne sobre $ .fn.dropdownhover = Funcion (opciones) parent$allDropdowns = $allDropdowns.add(this.parent());return this.each(function() {var $this = $(this).parent(),defaults = {delay: 500,instantlyCloseOthers: true},data = {delay: $(this).data('delay'),instantlyCloseOthers: $(this).data('close-others')},options = $.extend(true, {}, defaults, options, data),timeout;$this.hover(function() {if(options.instantlyCloseOthers === true)$allDropdowns.removeClass('open');window.clearTimeout(timeout);$(this).addClass('open');}, function() {timeout = window.setTimeout(function() {$ this.removeclass ('open');}, options.delay);});});}); $ ('[data-hover = "desplegable"]'). Dropdownhover ();}) (jQuery, esto);Puede ver que el autor ha agregado un semicolon frente al complemento, lo que aumenta la compatibilidad del complemento, porque el código JS anterior puede no estar escrito; Si no se agrega el punto y coma aquí, puede causar un error JS porque no hay ruptura de línea.
El complemento admite la transferencia de datos de elementos HTML-* y también admite la transferencia de parámetros de inicialización. Simplemente coloque este código JS detrás del código JS original en Bootstrap.
Lo anterior es la introducción del editor para cambiar el menú desplegable desplegable en Bootstrap para pasar el gatillo. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!