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

 更新时间:2016年04月17日 09:20:19   作者:请把姓名返给我  
bootstrap的下拉组件,需要点击click时,方可展示下拉列表。因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框。这篇文章主要介绍了JS组件Bootstrap dropdown组件扩展hover事件,感兴趣的小伙伴们可以参考一下

bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍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另一个组件就会出现如下效果:

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

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

相关文章

  • 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    这篇文章主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 如何通过JS实现转码与解码

    如何通过JS实现转码与解码

    这篇文章主要介绍了如何通过JS实现转码与解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JavaScript实现鼠标控制自由移动的窗口

    JavaScript实现鼠标控制自由移动的窗口

    这篇文章主要为大家详细介绍了JavaScript实现鼠标控制自由移动的窗口,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • js检测iframe是否加载完成的方法

    js检测iframe是否加载完成的方法

    这篇文章主要介绍了js检测iframe是否加载完成的方法,涉及JavaScript针对框架页面控件值的判断与页面加载的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 利用js判断手机是否安装某个app的多种方案

    利用js判断手机是否安装某个app的多种方案

    这篇文章主要介绍了利用js检测手机是否安装某个app的多种方案,当判断后如果安装了直接打开,如果有没有安装将自动跳转到下载的界面,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • thinkphp实现无限分类(使用递归)

    thinkphp实现无限分类(使用递归)

    这篇文章主要介绍了在使用递归的情况下thinkphp实现无限分类,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js获取内联样式的方法

    js获取内联样式的方法

    这篇文章主要介绍了js获取内联样式的方法,针对标准浏览器与IE浏览器进行不同的判断与获取,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 去除JavaScript对象中空值和空对象的四种方式

    去除JavaScript对象中空值和空对象的四种方式

    开发时遇到一个问题,需要将对象中的空值和空对象去除,所以这篇文章主要给大家介绍了关于去除JavaScript对象中空值和空对象的四种方式,需要的朋友可以参考下
    2023-09-09
  • javascript数组去掉重复

    javascript数组去掉重复

    去tx面试过几次,基本都会考到数组去重。其实平时工作中几乎不会用到,再者也没认真去了解过,所以基本上每次面到这里都会露出很大的马脚,面试自然也over了
    2011-05-05
  • JavaScript统计数组中相同的数量的方法总结

    JavaScript统计数组中相同的数量的方法总结

    在JavaScript中,我们经常需要对数组中对象的属性进行统计。在本文中,我们将介绍如何使用JavaScript来实现这一功能,文中有详细的代码示例,需要的朋友可以借鉴参考
    2023-05-05

最新评论