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"即可