Responsive navigation bars are used when using bootstrap to create the background. Among them, the dropdown component is used more often. The more you use it, the more you need to click. The dropdown defaults to expand the left mouse button. If you use the mouse to expand it (hover) it will save clicking time, which can improve efficiency.
The original transformation idea is: bind the hover event to the dropdown element. When the hover goes up, execute the click event of the element - that is, synchronize the hover as a click, and the hover is click.
But thinking that instead of remodeling it yourself, it is better to search online to see if there are any ready-made plugins. Sure enough, I searched it and the code URL hosted on github: View
Here, just copy the code:
;(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 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.
The plug-in supports HTML element data-* parameter transfer, and also supports initialization parameter transfer. Just place this js code behind the original js code in bootstrap.
The above is the editor’s introduction to change the Dropdown drop-down menu in Bootstrap to hover trigger. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!