The dropdown component in the bootstrap navigation bar is used very frequently. This article introduces the dropdown component extension hover event in bootstrap. The specific content is as follows
How to implement this hover event? In fact, it is easy to complete based on the click event of the dropdown component. Those who are careful can find that when the drop-down box appears, its parent will have 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 plugin, code URL hosted on github: View
Here is the complete js plugin code:
// 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);You can see that the author has added a semicolon in front of the plug-in, which increases the compatibility of the plug-in, because the previous js code may not be written; if the semicolon is not added here, it may cause a js error because there is no line break.
Optional parameters
delay: (optional parameter) Delay in milliseconds. This is the time to close the pull-down before the mouse is no longer in the drop-down menu or button/navigation item, activate it. The default value is 500.
instantlyCloseOthers: (optional parameter) A boolean value, if true, will immediately close all other drop-down menus when you start a new selector matching navigation. The default value is true.
After adding the above js code, the effect cannot be realized at this time, because we need to do another step, which is to add data-* attributes to the element:
data-hover="dropdown"
Complete HTML element code:
Copy the code as follows:<a href="javascript:;" data-toggle="dropdown" data-hover="dropdown"></a>
Options can be set through data attributes, or through data-delay and data-close-others
Copy the code as follows:<a href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"></a>
Of course, there is also the easiest way, which is to use css hover to control
[/code].nav> li:hover .dropdown-menu {display: block;}[/code]
This kind of code can also achieve the desired hover effect, but if you click on the component when hovering and then go to another component to hover, the following effect will appear:
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is the method of using the Bootstrap dropdown component that you have shared with you. I hope it will be helpful for you to master the hover event.