Recientemente, la compañía utilizó la función de menú Bootstrap para hacer páginas web. Era necesario pasar el mouse para mostrar el menú secundario, por lo que lo estudié y descubrí que probablemente hay dos métodos.
El primer método: modificar la hoja de estilo
De hecho, es relativamente simple. Solo necesita agregar un CSS para establecer el estado de flotar y establecer el menú desplegable al bloque. Para CSS específico:
La copia del código es la siguiente:
.nav> li: Hover .dropdown-Menu {display: block;}
Esta oración CSS se agrega al CSS que aparece después de bootstrap.min.css, ¡pruébelo!
defecto:
1. No se puede hacer clic en el menú superior correspondiente
2. Después de que el mouse se desliza hacia el menú secundario, el menú superior no tiene estilo
El segundo método: use las características de jQuery para implementar
Combinado con tutoriales en línea, dos eventos en jQuery pueden resolver el problema. Para CSS específico:
La copia del código es la siguiente:
// Cierre el evento click.bs.dropdown.data-api para que haga clic en el menú superior
$ (documento) .Off ('click.bs.dropdown.data-api');
// Origen automáticamente
$ ('. Nav .dropdown'). Mouseenter (function () {
$ (esto) .AddClass ('Open');
});
//Original
$ ('. Nav .dropdown'). MouseLeave (function () {
$ (this) .removeclass ('abierto');
});
Este método no solo le permite hacer clic en el menú superior, sino que tampoco pierde el estilo, sino que también resuelve el problema del mouse de bootstrap. Se recomienda a todos.