El componente desplegable en la barra de navegación de bootstrap se usa con mucha frecuencia. Este artículo presenta el evento de extensión del componente desplegable en Bootstrap. El contenido específico es el siguiente
¿Cómo implementar este evento de desplazamiento? De hecho, es fácil de completar en función del evento de clic del componente desplegable. Aquellos que tienen cuidado pueden encontrar que cuando aparezca el cuadro desplegable, su padre tendrá un atributo de clase abierta. Solo necesitamos agregar o eliminar la clase abierta a los padres al escuchar el evento de desplazamiento.
complemento boostrap-hover-drown.js, URL de código alojada en GitHub: Ver
Aquí está el código completo de complemento JS:
// barra de navegación receptiva de bootstrap <br>; (function ($, window, undefined) {// fuera del alcance del complemento jQuery a // Realice un seguimiento de todos los desplegables Var $ alldropdowns = $ (); // Si InstantyCloseThers es verdadero, entonces será instantáneamente // Otros elementos de Nav cuando se anhele un nuevo. Care About // es el patrón desplegable $ alldropdowns = $ alldropdowns.add (this.parent ()); $ (this) .Data ('Close-Ots')}, options = $ .extend (true, {}, predeterminado, opciones, datos), timeout; function () {timeOut = Window.settImEout (function () {$ this.removeclass ('open');}, options.delay);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.
Parámetros opcionales
Retraso: (parámetro opcional) Retraso en milisegundos. Este es el momento de cerrar el despegue antes de que el mouse ya no esté en el menú desplegable o el botón/elemento de navegación, activelo. El valor predeterminado es 500.
Instantáneamente clásicos: (parámetro opcional) Un valor booleano, si es cierto, cerrará inmediatamente todos los demás menús desplegables cuando comience una nueva navegación selectora coincidente. El valor predeterminado es verdadero.
Después de agregar el código JS anterior, el efecto no se puede realizar en este momento, porque necesitamos hacer otro paso, que es agregar datos:* atributos al elemento:
data-hover = "desplegable"
Código de elemento HTML completo:
Copie el código de la siguiente manera: <a href = "javascript :;" data-toggle = "desplegable" data-hover = "desplegable"> </a>
Las opciones se pueden establecer a través de atributos de datos, o a través de Data-Delay y Data-Close-Other
Copie el código de la siguiente manera: <a href = "#" data-toggle = "desplegable" data-hover = "desplegable" data-ely = "1000" data-close-others = "false"> </a>
Por supuesto, también existe la forma más fácil, que es usar CSS Hover para controlar
[/código] .nav> li: hover .dropdown-Menu {display: block;} [/code]
Este tipo de código también puede lograr el efecto de desplazamiento deseado, pero si hace clic en el componente al flotar y luego va a otro componente para desplazarse, aparecerá el siguiente efecto:
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Lo anterior es el método de usar el componente desplegable Bootstrap que ha compartido con usted. Espero que sea útil para usted dominar el evento Hover.