DahuangPhoneLAMPCSS & DIV → bootstrap中的dropdown组件扩展hover事件


  共有519人关注过本帖平板打印复制链接

主题:bootstrap中的dropdown组件扩展hover事件

帅哥哟,离线,有人找我吗?
wong
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:新手上路 帖子:11 积分:242 威望:0 精华:0 注册:2013/12/4 22:26:13
bootstrap中的dropdown组件扩展hover事件  发帖心情 Post By:2019/2/19 18:20:02 [只看该作者]

 第一步:新建一个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"即可

 回到顶部