https://pn-medan.com/struktur-organisasi/js/hover_dropdown.min.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()).add(this.parent().children('.dropdown-menu'));
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('show') && !$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                if($this.parents(".navbar").find(".navbar-toggler").is(":visible")) {
59                    // If we're inside a navbar, don't do anything when the
60                    // navbar is collapsed, as it makes the navbar pretty unusable.
61                    return;
62                }
63
64                // clear timer for hover event
65                window.clearTimeout(timeoutHover)
66                timeout = window.setTimeout(function () {
67                    $this.attr('aria-expanded', 'false');
68                    $parent.removeClass('show');
69                    $parent.children('.dropdown-menu').removeClass('show');
70                    $this.trigger(hideEvent);
71                }, settings.delay);
72            });
73
74            // this helps with button groups!
75            $this.hover(function (event) {
76                // this helps prevent a double event from firing.
77                // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
78                if(!$parent.hasClass('show') && !$parent.is(event.target)) {
79                    // stop this event, stop executing any code
80                    // in this callback but continue to propagate
81                    return true;
82                }
83
84                openDropdown(event);
85            });
86
87            // handle submenus
88            $parent.find('.dropdown-submenu').each(function (){
89                var $this = $(this);
90                var subTimeout;
91
92                if($this.parents(".navbar").find(".navbar-toggler").is(":visible")) {
93                    // If we're inside a navbar, don't do anything when the
94                    // navbar is collapsed, as it makes the navbar pretty unusable.
95                    return;
96                }
97
98                $this.hover(function () {
99                    window.clearTimeout(subTimeout);
100                    $this.addClass('show');
101                    $this.children('.dropdown-menu').addClass('show');
102                    // always close submenu siblings instantly
103                    $this.siblings().children('.dropdown-menu').removeClass('show');
104                }, function () {
105                    var $submenu = $this.children('.dropdown-menu'),
106                    	// $parent = $this.parent('dropdown-submenu');
107                    subTimeout = window.setTimeout(function () {
108                        $submenu.removeClass('show');
109                        $this.removeClass('show');
110                    }, settings.delay);
111                });
112            });
113
114            function openDropdown(event) {
115                if($this.parents(".navbar").find(".navbar-toggler").is(":visible")) {
116                    // If we're inside a navbar, don't do anything when the
117                    // navbar is collapsed, as it makes the navbar pretty unusable.
118                    return;
119                }
120
121                // clear dropdown timeout here so it doesnt close before it should
122                window.clearTimeout(timeout);
123                // restart hover timer
124                window.clearTimeout(timeoutHover);
125                
126                // delay for hover event.  
127                timeoutHover = window.setTimeout(function () {
128                    $allDropdowns.find(':focus').blur();
129
130                    if(settings.instantlyCloseOthers === true) {
131                        $allDropdowns.removeClass('show');
132                        // $allDropdowns.children('.dropdown-menu').removeClass('show');
133                    }
134                    
135                    // clear timer for hover event
136                    window.clearTimeout(timeoutHover);
137                    $this.attr('aria-expanded', 'true');
138                    $parent.addClass('show');
139                    $parent.children('.dropdown-menu').addClass('show');
140                    $this.trigger(showEvent);
141                }, settings.hoverDelay);
142            }
143        });
144    };
145
146    $(document).ready(function () {
147        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
148        $('[data-hover="dropdown"]').dropdownHover();
149    });
150})(jQuery, window);