Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发


Posted in Javascript onAugust 31, 2016

在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率。

Bootstrap中的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();
})(jQuery, this);

可以看到作者在插件前面加了个分号;,增加了插件的兼容性,因为可能上一个js代码没写;,如果在此不加分号则可能因为没换行导致js出错。

插件支持HTML元素data-*传参,也支持初始化传参。将此js代码放在bootstrap原本的js代码后面执行即可。

以上所述是小编给大家介绍的Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js日历功能对象
Jan 12 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
token 机制和实现方式
Dec 15 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 #Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 #Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 #Javascript
原生js实现tab选项卡切换
Mar 23 #Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 #Javascript
Javascript日期格式化format函数的使用方法
Aug 30 #Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 #Javascript
You might like
一个取得文件扩展名的函数
2006/10/09 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
详解python中的数据类型和控制流
2019/08/08 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
pytorch之添加BN的实现
2020/01/06 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
信息技术培训感言
2014/03/06 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
2022年四月新番
2022/03/15 日漫
MySQL分区路径子分区再分区
2022/04/13 MySQL