/** * @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);