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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
使用js画图之画切线
Jan 12 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
理解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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
使用python实现名片管理系统
2020/06/18 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
蓝颜请假条
2014/04/11 职场文书
节约用水倡议书
2014/04/16 职场文书
好的旅游活动方案
2014/08/19 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
感恩老师主题班会
2015/08/12 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android