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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
js计算页面刷新的次数
Jul 20 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
vue-model实现简易计算器
Aug 17 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+MSSQL分页的例子
2006/10/09 PHP
PHP四大安全策略
2014/03/12 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
extjs render 用法介绍
2013/09/11 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
讲解Python中fileno()方法的使用
2015/05/24 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python实现完整的事务操作示例
2017/06/20 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python 中如何写注释
2020/08/28 Python
python 模拟登录B站的示例代码
2020/12/15 Python
《记承天寺夜游》教学反思
2014/02/16 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
食品安全主题班会
2015/08/13 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Kubernetes控制节点的部署
2022/04/01 Servers