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

Source: Internet
Author: User

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!

Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.