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代码
Jun 27 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
用vue 实现手机触屏滑动功能
May 28 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
Javascript webpack动态import
Apr 19 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
取选中的radio的值
2010/01/11 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python字符串处理函数简明总结
2015/04/13 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python高级用法总结
2018/05/26 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
总经理任命书
2014/03/29 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
离婚律师函范本
2015/05/27 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
MySQL 聚合函数排序
2021/07/16 MySQL
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android