Recentemente, a empresa usou a função de menu Bootstrap para fazer páginas da web. Era necessário pairar o mouse para exibir o menu secundário, então eu o estudei e descobri que provavelmente existem dois métodos.
O primeiro método: modifique a folha de estilo
De fato, é relativamente simples. Você só precisa adicionar um CSS para definir o estado do Hover e definir o menu suspenso para bloquear. Para CSS específico:
A cópia do código é a seguinte:
.nav> li: hover .dropdown-menu {display: block;}
Esta frase CSS é adicionada ao CSS que aparece após o bootstrap.min.css, tente!
deficiência:
1. O menu superior correspondente não pode ser clicado
2. Depois que o mouse desliza para o menu secundário, o menu superior não tem estilo
O segundo método: use os recursos do jQuery para implementar
Combinados com tutoriais on -line, dois eventos no jQuery podem resolver o problema. Para CSS específico:
A cópia do código é a seguinte:
// Feche o evento click.bs.dropdown.data-api para tornar o menu superior clicável
$ (document) .off ('click.bs.dropdown.data-api');
// origem automaticamente
$ ('. Nav .Dropdown'). MouseEnter (function () {
$ (this) .Addclass ('Open');
});
//Original
$ ('. Nav .Dropdown'). Mouseleave (function () {
$ (this) .RemoveClass ('Open');
});
Esse método não apenas permite clicar no menu superior, mas também não perde o estilo, mas também resolve o problema do mouse de bootstrap pairando. É recomendado a todos.