;(function ($, window, undefined) { "use strict"; // don't do anything if touch is supported // (plugin causes some issues on mobile) if('ontouchstart' in document) return; // 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.hoverdown = 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 = $this.parent(), defaults = { delay: 500, instantlyCloseOthers: true }, showEvent = 'show.bs.dropdown', hideEvent = 'hide.bs.dropdown', data = { delay: $(this).data('delay'), instantlyCloseOthers: $(this).data('close-others') }, settings = $.extend(true, {}, defaults, options, data), timeout; $parent.hover(function (event) { // so a neighbor can't open the dropdown if(!$parent.hasClass('open') && !$this.is(event.target)) { return true; } if(settings.instantlyCloseOthers === true) $allDropdowns.removeClass('open'); window.clearTimeout(timeout); $parent.addClass('open'); $parent.trigger($.Event('show.bs.dropdown')); }, function () { timeout = window.setTimeout(function() { $parent.removeClass('open'); $this.trigger(hideEvent); }, settings.delay); }); // this helps with button groups! $this.hover(function () { if(settings.instantlyCloseOthers === true) $allDropdowns.removeClass('open'); window.clearTimeout(timeout); $parent.addClass('open'); $this.trigger(showEvent); }); // handle submenus $parent.find('.dropdown-submenu').each(function () { var $this = $(this); var subTimeout; $this.hover(function() { window.clearTimeout(subTimeout); $this.children('.dropdown-menu').show(); // always close submenu siblings instantly $this.siblings().children('.dropdown-menu').hide(); }, function () { var $submenu = $this.children('.dropdown-menu'); subTimeout = window.setTimeout(function () { $submenu.hide(); }, settings.delay); }); }); }); }; $(document).ready(function () { // apply hoverdown to all elements with the data-hover="dropdown" attribute $('[data-hover="dropdown"]').hoverdown(); }); })(jQuery, this);