O componente suspenso na barra de navegação de bootstrap é usado com muita frequência. Este artigo apresenta o evento de extensão do componente suspenso no Bootstrap. O conteúdo específico é o seguinte
Como implementar este evento pairar? Na verdade, é fácil concluir com base no evento de cliques do componente suspenso. Aqueles que são cuidadosos podem descobrir que, quando a caixa suspensa aparecer, seus pais terão um atributo de classe aberta. Precisamos apenas adicionar ou excluir a classe aberta aos pais ao ouvir o evento Passe Wover.
plugin Boostrap-hover-dropdown.js, URL de código hospedado no github: visualização
Aqui está o código de plug -in completo do JS:
// barra de navegação responsiva de bootstrap <br>; (função ($, janela, indefinida) {// fora do escopo do plug -in jQuery para // acompanha todos os suspensos var $ allDropdowns = $ (); // se instantânea é verdadeiro. Sobre // é o pai do suspensão do DOURTGLE $ allDropdowns = $ alldropdowns.add (this.parent ()); $ (this) .Data ('perto de outros')}, opções = $ .extend (true, {}, padrões, opções, dados), timeout; function () {timeout = window.setTimeout (function () {$ this.removeclass ('Open');}, opções.Delay);Você pode ver que o autor adicionou um ponto e vírgula na frente do plug-in, o que aumenta a compatibilidade do plug-in, porque o código JS anterior não pode ser gravado; Se o semicolon não for adicionado aqui, pode causar um erro JS, porque não há quebra de linha.
Parâmetros opcionais
Atraso: (parâmetro opcional) Atraso em milissegundos. Este é o momento de fechar o puxar antes que o mouse não esteja mais no menu suspenso ou no item de botão/navegação, ativá-lo. O valor padrão é 500.
InstantanetClose-Thouthers: (parâmetro opcional) Um valor booleano, se verdadeiro, fechará imediatamente todos os outros menus suspensos quando você iniciar uma nova navegação correspondente ao seletor. O valor padrão é verdadeiro.
Depois de adicionar o código JS acima, o efeito não pode ser realizado no momento, porque precisamos fazer outra etapa, que é adicionar dados-* atributos ao elemento:
Data-hover = "Dropdown"
Código de elemento HTML completo:
Copie o código da seguinte forma: <a href = "javascript:;" data-toggle = "suspenso" data hover = "suspenso"> </a>
As opções podem ser definidas por meio de atributos de dados, ou por meio de atraso de dados e outros outros
Copie o código da seguinte forma: <a href = "#" data-toggle = "suspenso" data-hover = "suspenso" data-dellay = "1000" Data-close-deothers = "false"> </a>
Claro, há também a maneira mais fácil, que é usar o CSS pairar para controlar
[/code] .nav> li: hover .dropdown-menu {display: block;} [/code]
Esse tipo de código também pode atingir o efeito de pairar desejado, mas se você clicar no componente ao passar o mouse e depois for para outro componente para pairar, o seguinte efeito aparecerá:
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
O exposto acima é o método de usar o componente suspenso Bootstrap que você compartilhou com você. Espero que seja útil que você domine o evento Passeio.