bootstrap中的dropdown组件扩展hover事件

第一步：新建一个js文件，取名 boostrap-hover-dropdown.js。代码如下：

;( 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) {

// 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(),

defaults = {

delay: 500,

instantlyCloseOthers: true

},

data = {

delay: $( this ).data('delay '),

instantlyCloseOthers: $(this).data(' close-others ')

},

options = $.extend(true, {}, defaults, options, data),

timeout;

$this.hover(function() {

if(options.instantlyCloseOthers === true)

$allDropdowns.removeClass(' open ');

window.clearTimeout(timeout);

$(this).addClass(' open ');

}, function() {

timeout = window.setTimeout(function() {

$this.removeClass(' open ');

}, options.delay);

});

});

};

$(' [data-hover= "dropdown" ]').dropdownHover();

})(jQuery, this );

第二步：在需要有下拉菜单功能的文件中引入boostrap-hover-dropdown.js文件。

第三步：在需要的button或a标签中加入data-hover="dropdown"即可