https://urvasi.com/common/js/bootstrap-hover-dropdown.js

1/**
2 * @preserve
3 * Project: Bootstrap Hover Dropdown
4 * Author: Cameron Spear
5 * Version: v2.2.1
6 * Contributors: Mattia Larentis
7 * Dependencies: Bootstrap's Dropdown plugin, jQuery
8 * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
9 * License: MIT
10 * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
11 */
12;(function ($, window, undefined) {
13    // outside the scope of the jQuery plugin to
14    // keep track of all dropdowns
15    var $allDropdowns = $();
16
17    // if instantlyCloseOthers is true, then it will instantly
18    // shut other nav items when a new one is hovered over
19    $.fn.dropdownHover = function (options) {
20        // don't do anything if touch is supported
21        // (plugin causes some issues on mobile)
22        if('ontouchstart' in document) return this; // don't want to affect chaining
23
24        // the element we really care about
25        // is the dropdown-toggle's parent
26        $allDropdowns = $allDropdowns.add(this.parent());
27
28        return this.each(function () {
29            var $this = $(this),
30                $parent = $this.parent(),
31                defaults = {
32                    delay: 500,
33                    hoverDelay: 0,
34                    instantlyCloseOthers: true
35                },
36                data = {
37                    delay: $(this).data('delay'),
38                    hoverDelay: $(this).data('hover-delay'),
39                    instantlyCloseOthers: $(this).data('close-others')
40                },
41                showEvent   = 'show.bs.dropdown',
42                hideEvent   = 'hide.bs.dropdown',
43                // shownEvent  = 'shown.bs.dropdown',
44                // hiddenEvent = 'hidden.bs.dropdown',
45                settings = $.extend(true, {}, defaults, options, data),
46                timeout, timeoutHover;
47
48            $parent.hover(function (event) {
49                // so a neighbor can't open the dropdown
50                if(!$parent.hasClass('open') && !$this.is(event.target)) {
51                    // stop this event, stop executing any code
52                    // in this callback but continue to propagate
53                    return true;
54                }
55
56                openDropdown(event);
57            }, function () {
58                // clear timer for hover event
59                window.clearTimeout(timeoutHover)
60                timeout = window.setTimeout(function () {
61                    $this.attr('aria-expanded', 'false');
62                    $parent.removeClass('open');
63                    $this.trigger(hideEvent);
64                }, settings.delay);
65            });
66
67            // this helps with button groups!
68            $this.hover(function (event) {
69                // this helps prevent a double event from firing.
70                // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
71                if(!$parent.hasClass('open') && !$parent.is(event.target)) {
72                    // stop this event, stop executing any code
73                    // in this callback but continue to propagate
74                    return true;
75                }
76
77                openDropdown(event);
78            });
79
80            // handle submenus
81            $parent.find('.dropdown-submenu').each(function (){
82                var $this = $(this);
83                var subTimeout;
84                $this.hover(function () {
85                    window.clearTimeout(subTimeout);
86                    $this.children('.dropdown-menu').show();
87                    // always close submenu siblings instantly
88                    $this.siblings().children('.dropdown-menu').hide();
89                }, function () {
90                    var $submenu = $this.children('.dropdown-menu');
91                    subTimeout = window.setTimeout(function () {
92                        $submenu.hide();
93                    }, settings.delay);
94                });
95            });
96
97            function openDropdown(event) {
98                if($this.parents(".navbar").find(".navbar-toggle").is(":visible")) {
99                    // If we're inside a navbar, don't do anything when the
100                    // navbar is collapsed, as it makes the navbar pretty unusable.
101                    return;
102                }
103
104                // clear dropdown timeout here so it doesnt close before it should
105                window.clearTimeout(timeout);
106                // restart hover timer
107                window.clearTimeout(timeoutHover);
108                
109                // delay for hover event.  
110                timeoutHover = window.setTimeout(function () {
111                    $allDropdowns.find(':focus').blur();
112
113                    if(settings.instantlyCloseOthers === true)
114                        $allDropdowns.removeClass('open');
115                    
116                    // clear timer for hover event
117                    window.clearTimeout(timeoutHover);
118                    $this.attr('aria-expanded', 'true');
119                    $parent.addClass('open');
120                    $this.trigger(showEvent);
121                }, settings.hoverDelay);
122            }
123        });
124    };
125
126    $(document).ready(function () {
127        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
128        $('[data-hover="dropdown"]').dropdownHover();
129    });
130})(jQuery, window);