JS component Bootstrap dropdown component extends the hover event, dropdownhover

JS component Bootstrap dropdown component extends the hover event, dropdownhover

The dropdown component in the bootstrap navigation bar is frequently used. This article will introduce the hover event extended by the dropdown component in bootstrap. The details are as follows:

How can we implement this hover event? In fact, it is well completed on the basis of the Click Event of the dropdown component. When a drop-down box appears, the parent class has an open class attribute. We only need to add or delete the open class to the parent when listening to the hover event.

Boostrap-hover-dropdown.js plug-ins, hosted on github code URL: View

The complete js plug-in code is as follows:

// Bootstrap responsive navigation bar <br>; (function ($, window, undefined) {// outside the scope of the jQuery plugin to // keep track of all dropdowns var $ 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 parent $ allDropdowns = $ 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 );

We can see that the author adds a semicolon before the plug-in, which increases the plug-in compatibility, because the previous JavaScript code may not be written ;, if you do not add any extra points here, js errors may occur because there is no line feed.

Optional Parameter
Delay: (optional) latency in milliseconds. This is the waiting time before closing the drop-down when the mouse is no longer in the drop-down menu or button/navigation project, activate it. The default value is 500.
InstantlyCloseOthers: (optional) A boolean value. If it is true, use of all other drop-down menus is immediately disabled. When you start a new selector match navigation. The default value is true.

After the above js Code is added, the effect cannot be achieved at this time, because we need to add the data-* attribute to the element:

Data-hover = "dropdown"
Complete HTML element code:
Copy codeThe Code is as follows: <a href = "javascript:;" class = "dropdown-toggle" data-toggle = "dropdown" data-hover = "dropdown"> </a>
You can set options through data attribute settings, or through data-delay and data-close-others.

Copy codeThe Code is as follows: <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" data-hover = "dropdown" data-delay = "1000" data-close-others = "false"> </a>
Of course, the simplest way is to use css hover control.

[/Code]. nav> li: hover. dropdown-menu {display: block;} [/code]
Such a code can also achieve the desired hover effect, but if you click the component during the hover and then go to another component of the hover, the following effect will appear:

The preceding section describes how to use the Bootstrap dropdown component to extend the hover event. It is helpful for you to master hover events.