Bootstrap中的中的Dropdown下拉菜单更改为悬停下拉菜单更改为悬停(hover)触发触发
在使用bootstrap制作响应式导航条时,dropdown组件用的比较多,dropdown默认鼠标左键单击才展开,如果
使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率,下面小编给大家解答下实现思路
在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默
认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率。
原本的改造思路是:原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件——即把hover同步为
click,hover即为click。
但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在github上的代码网址:
查看
在这儿就直接把代码复制出来:
;(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();
评论0