123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- /**
- * @preserve
- * Project: Bootstrap Hover Dropdown
- * Author: Cameron Spear
- * Version: v2.2.1
- * Contributors: Mattia Larentis
- * Dependencies: Bootstrap's Dropdown plugin, jQuery
- * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
- * License: MIT
- * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
- */
- ;(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) {
- // don't do anything if touch is supported
- // (plugin causes some issues on mobile)
- if('ontouchstart' in document) return this; // don't want to affect chaining
- // the element we really care about
- // is the dropdown-toggle's parent
- $allDropdowns = $allDropdowns.add(this.parent()).add(this.parent().children('.dropdown-menu'));
- return this.each(function () {
- var $this = $(this),
- $parent = $this.parent(),
- defaults = {
- delay: 500,
- hoverDelay: 0,
- instantlyCloseOthers: true
- },
- data = {
- delay: $(this).data('delay'),
- hoverDelay: $(this).data('hover-delay'),
- instantlyCloseOthers: $(this).data('close-others')
- },
- showEvent = 'show.bs.dropdown',
- hideEvent = 'hide.bs.dropdown',
- // shownEvent = 'shown.bs.dropdown',
- // hiddenEvent = 'hidden.bs.dropdown',
- settings = $.extend(true, {}, defaults, options, data),
- timeout, timeoutHover;
- $parent.hover(function (event) {
- // so a neighbor can't open the dropdown
- if(!$parent.hasClass('show') && !$this.is(event.target)) {
- // stop this event, stop executing any code
- // in this callback but continue to propagate
- return true;
- }
- openDropdown(event);
- }, function () {
- if($this.parents(".navbar").find(".navbar-toggler").is(":visible")) {
- // If we're inside a navbar, don't do anything when the
- // navbar is collapsed, as it makes the navbar pretty unusable.
- return;
- }
- // clear timer for hover event
- window.clearTimeout(timeoutHover)
- timeout = window.setTimeout(function () {
- $this.attr('aria-expanded', 'false');
- $parent.removeClass('show');
- $parent.children('.dropdown-menu').removeClass('show');
- $this.trigger(hideEvent);
- }, settings.delay);
- });
- // this helps with button groups!
- $this.hover(function (event) {
- // this helps prevent a double event from firing.
- // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
- if(!$parent.hasClass('show') && !$parent.is(event.target)) {
- // stop this event, stop executing any code
- // in this callback but continue to propagate
- return true;
- }
- openDropdown(event);
- });
- // handle submenus
- $parent.find('.dropdown-submenu').each(function (){
- var $this = $(this);
- var subTimeout;
- if($this.parents(".navbar").find(".navbar-toggler").is(":visible")) {
- // If we're inside a navbar, don't do anything when the
- // navbar is collapsed, as it makes the navbar pretty unusable.
- return;
- }
- $this.hover(function () {
- window.clearTimeout(subTimeout);
- $this.addClass('show');
- $this.children('.dropdown-menu').addClass('show');
- // always close submenu siblings instantly
- $this.siblings().children('.dropdown-menu').removeClass('show');
- }, function () {
- var $submenu = $this.children('.dropdown-menu'),
- // $parent = $this.parent('dropdown-submenu');
- subTimeout = window.setTimeout(function () {
- $submenu.removeClass('show');
- $this.removeClass('show');
- }, settings.delay);
- });
- });
- function openDropdown(event) {
- if($this.parents(".navbar").find(".navbar-toggler").is(":visible")) {
- // If we're inside a navbar, don't do anything when the
- // navbar is collapsed, as it makes the navbar pretty unusable.
- return;
- }
- // clear dropdown timeout here so it doesnt close before it should
- window.clearTimeout(timeout);
- // restart hover timer
- window.clearTimeout(timeoutHover);
-
- // delay for hover event.
- timeoutHover = window.setTimeout(function () {
- $allDropdowns.find(':focus').blur();
- if(settings.instantlyCloseOthers === true) {
- $allDropdowns.removeClass('show');
- // $allDropdowns.children('.dropdown-menu').removeClass('show');
- }
-
- // clear timer for hover event
- window.clearTimeout(timeoutHover);
- $this.attr('aria-expanded', 'true');
- $parent.addClass('show');
- $parent.children('.dropdown-menu').addClass('show');
- $this.trigger(showEvent);
- }, settings.hoverDelay);
- }
- });
- };
- $(document).ready(function () {
- // apply dropdownHover to all elements with the data-hover="dropdown" attribute
- $('[data-hover="dropdown"]').dropdownHover();
- });
- })(jQuery, window);
|