JS component Bootstrapdropdown component extension hover Event _ javascript skills

Source: Internet
Author: User
The bootstrap drop-down component can be displayed only when you click it. Therefore, it is inconvenient for users who like simple and few operations to click. Therefore, the hover listener is introduced and the mouse is automatically displayed in the drop-down box. This article describes how to extend the hover event of the JS component Bootstrapdropdown. If you are interested, refer to the bootstrap navigation bar, which frequently uses the dropdown component, this article introduces the hover event extension of 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
; (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:

The Code is as follows:

You can set options through data attribute settings, or through data-delay and data-close-others.

The Code is as follows:

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.

Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.