第一步:新建一个js文件,取名
boostrap-hover-dropdown.js。代码如下:
;(
function
($, window, undefined) {
var
$allDropdowns = $();
$.fn.dropdownHover =
function
(options) {
$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"即可