As barras de navegação responsivas são usadas ao usar o bootstrap para criar o plano de fundo. Entre eles, o componente suspenso é usado com mais frequência. Quanto mais você o usa, mais você precisa clicar. O suspenso padrão é expandir o botão esquerdo do mouse. Se você usar o mouse para expandi -lo (passar o mouse), ele economizará tempo de clique, o que pode melhorar a eficiência.
A idéia de transformação original é: vincular o evento Passeio ao elemento suspenso. Quando o Hover subir, execute o evento de clique do elemento - ou seja, sincronize o mouse como um clique e o mouse é clique.
Mas, pensando que, em vez de remodelá-lo, é melhor pesquisar on-line para ver se existem plugins prontos. Com certeza, pesquisei e o URL de código hospedado no Github: Ver
Aqui, basta copiar o código:
;(function($, window, undefined) {// outside the scope of the jQuery plugin to// keep track of all dropdownsvar $allDropdowns = $();// if instantlyCloseOthers is true, then it will instantly// shut other nav items when a new one is hovered over$.fn.dropdownHover = function(options) {// the element we really care about// is the dropdown-toggle's Pai $ allDropdowns = $ allDropdowns.add (this.parent ()); retorne este.EECH (function () {var $ this = $ (this) .Parent (), padrão = {atraso: 500, instantal-MOTHESOTHERCHOUTHOS: True}, Data = {Atard: $ this) .data ('ALATO), instantâneos: $ .Extend (true, {}, padrões, opções, dados), timeout; $ this.hover (function () {if (options.instavelmenteCloseothers === TRUE) $ allDropdowns.removeClass ('Open'); Window.cleartimeout (timeout); $ (time) .Atdcls ('Open'); {$ this.RemoveClass ('Open');}, options.delay);});});}); $ ('[Data-hover = "suspenso"]'). DropDowNHover ();}) (jQuery, this);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.
O plug-in suporta dados de parâmetros do elemento HTML e também suporta transferência de parâmetros de inicialização. Basta colocar esse código JS atrás do código JS original no bootstrap.
O exposto acima é a introdução do editor para alterar o menu suspenso suspenso no bootstrap para o gatilho. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!