Dropdown drop-down menu in bootstrap change to hover (hover) trigger _javascript Tips

In the use of bootstrap production background used in response navigation bar, where the dropdown components are more use, more need to click on More, dropdown the default mouse button click to expand, if you use the mouse to put up (hover) on the expansion will save the click Time, This will improve efficiency.

The original idea is: to the dropdown element binding hover event, hover up, execution of the element click event-that is, hover synchronization for the click,hover is click.

But the thought of its own to transform, as a first search on the internet to see if there is no ready-made plug-ins, sure enough to search, hosted on the GitHub code URL: view

Just copy the code right here:

;(function ($, window, undefined) {//Outside the scope of the JQuery plugin to//keep track of all dropdowns var $allDr
opdowns = $ (); If Instantlycloseothers is true, then it would instantly//shut other NAV items when a new one was hovered over $.fn.dro Pdownhover = function (options) {//The element we really care about//is the Dropdown-toggle ' parent $allDropdowns = $a
Lldropdowns.add (This.parent ()); Return This.each (function () {var $this = $ (this). Parent (), defaults = {delay:500, instantlycloseothers:true}, data = {delay: $ (this). Data (' delay '), Instantlycloseothers: $ (this). Data (' Close-others ')}, Options = $.extend (true, {},
Defaults, options, data), timeout;
$this. Hover (function () {if (options.instantlycloseothers = = True) $allDropdowns. Removeclass (' open ');
Window.cleartimeout (timeout);
$ (this). addclass (' open ');
The function () {timeout = Window.settimeout (function () {$this. Removeclass (' Open ');}, Options.delay);});
});
}; $ (' [data-hover= ' dropdown] '). Dropdownhover (); }) (JQuery, this);

You can see that the author adds a semicolon to the plugin, adding compatibility because the previous JS code may not be written, and if you do not have a semicolon here, you may have an error because the line is not wrapped.

The plug-in supports HTML element data-*, and also supports initialization of parameters. The JS code will be placed in bootstrap original JS code behind the execution can be.

The above is a small set to introduce the bootstrap in the dropdown drop-down menu changes to hover (hover) trigger, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!