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 相关文章推荐
jquery的index方法实现tab效果
Feb 16 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
JS制作简易计算器的实例代码
Jul 04 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
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
js replace正则表达式应用案例讲解
2013/01/17 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
python实现rest请求api示例
2014/04/22 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
.NET方向面试题
2014/11/20 面试题
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
小学教研工作制度
2014/01/15 职场文书
京剧自荐信
2014/01/26 职场文书
大型活动组织方案
2014/05/10 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
争先创优心得体会
2014/09/12 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2015年工程部工作总结
2015/04/30 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python
MySQL查询日期时间
2022/05/15 MySQL