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 相关文章推荐
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
Javascript模块化机制实现原理详解
Apr 02 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的简单采集数据入库程序
2014/07/30 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
关于js datetime的那点事
2011/11/15 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python内置函数dir详解
2015/04/14 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python生成器推导式用法简单示例
2019/10/08 Python
使用Python实现牛顿法求极值
2020/02/10 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
夜不归宿检讨书
2014/02/25 职场文书
开学典礼决心书
2014/03/11 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
运动与健康自我评价
2015/03/09 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书