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