JS Component Bootstrap dropdown component extension hover event _javascript technique

The dropdown component in the bootstrap navigation bar is used very frequently, this article is to introduce the dropdown component extension hover event in Bootstrap, the details are as follows

How to achieve this hover event, in fact, in the dropdown component of the Click event on the basis of a good completion. The attentive person can find that when the Drop-down box appears, its parent will have an open class attribute. We just need to listen to the hover event and add or remove the Open class to the parent.

Boostrap-hover-dropdown.js plugin, hosted on the GitHub code URL: view

The following is the complete JS plug-in code:

Bootstrap response navigation bar <br>;(function ($, window, undefined) {//Outside the scope of the JQuery plugin to//keep TRA
 
 CK all dropdowns var $allDropdowns = $ (); If Instantlycloseothers is true, then it would instantly//shut other NAV items when a new one was hovered over $.FN.D Ropdownhover = function (options) {//The element we really care about//is the Dropdown-toggle ' s parent $allDrop
 
  Downs = $allDropdowns. 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 '); }, 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.

Optional parameters
Delay: (optional parameter) delay in milliseconds. This is the wait time before closing the dropdown when the mouse is no longer in the Drop-down menu or button/NAV item to activate it. The default value is 500.
Instantlycloseothers: (optional parameter) A Boolean value, if true, will immediately turn off all other Drop-down menus when you start a new selector matching navigation. The default value is true.

Add the above JS code, this time the effect can not be achieved, because we still need to do one step, is to add data-* attributes to the element:

Data-hover= "Dropdown"
Complete HTML element code:

Copy Code code as follows:

<a href= "javascript:;" class= "Dropdown-toggle" data-toggle= "dropdown" data-hover= "dropdown" ></a>

You can set options through data properties, or you can set options by Data-delay and Data-close-others

Copy Code code as follows:

<a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" data-hover= "dropdown" data-delay= "1000" Data-close-others= "false" ></a>

And of course, the easiest way to do that is to use the CSS hover control

[/code].nav> li:hover. dropdown-menu {display:block;} [/code]
Such a code can also achieve the desired hover effect, only if you click on the component in hover, then hover another component will have the following effect:

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is for you to share the Bootstrap dropdown component expansion hover event use method, hope to be proficient in mastering the hover event to help.