JS组件Bootstrap dropdown组件扩展hover事件


Posted in Javascript onApril 17, 2016

bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下

JS组件Bootstrap dropdown组件扩展hover事件

如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的。细心者可以发现,下拉框出现时,其父级会有一个open的class属性。我们只需要监听hover事件时,给父级增加或删除open类就可以了。

boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看

下面是完整的js插件代码:

// bootstrap响应式导航条<br>;(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出错。

可选参数
delay: (可选参数) 在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目,激活它。默认值 500。
instantlyCloseOthers: (可选参数) 一个布尔值,如果为真,将立即关闭所有其他下拉菜单的使用当您启动一个新的选择器匹配导航。默认值 true。

加上以上js代码后,此时效果还实现不了,因为我们还需要再做一步,就是给元素加上data-*属性:

data-hover="dropdown"
完整的HTML元素代码:

<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"></a>

可以通过数据属性设置选项,也可以通过data-delay和data-close-others来设置选项
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"></a>

当然,还有最简单的方法,那就是用css的hover控制

[/code].nav> li:hover .dropdown-menu {display: block;}[/code]
这样一句代码也能实现想要的hover效果,只不过如果在hover的时候点击组件,再去hover另一个组件就会出现如下效果:

JS组件Bootstrap dropdown组件扩展hover事件

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是为大家分享的Bootstrap dropdown组件扩展hover事件使用方法,希望对大家熟练掌握hover事件有所帮助。

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
js数组操作常用方法
May 08 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
理解javascript对象继承
Apr 17 #Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
js如何准确获取当前页面url网址信息
Sep 13 #Javascript
基于javascript实现图片切换效果
Apr 17 #Javascript
非常棒的jQuery图片轮播效果
Apr 17 #Javascript
jQuery实现的倒计时效果实例小结
Apr 16 #Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 #Javascript
You might like
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
javascript中的new使用
2010/03/20 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python发送伪造的arp请求
2014/01/09 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python IDLE添加行号显示教程
2020/04/25 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
意向书范文
2014/03/31 职场文书
部门年终奖分配方案
2014/05/07 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
配置nginx负载均衡
2022/05/06 Servers