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事件有所帮助。

相关文章

  • javascript针对cookie的基本操作实例详解

    javascript针对cookie的基本操作实例详解

    这篇文章主要介绍了javascript针对cookie的基本操作,结合实例形式较为详细的分析了JavaScript操作cookie的基本技巧,并给出了一个JavaScript操作cookie的完整类,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 纯js实现瀑布流展现照片(自动适应窗口大小)

    纯js实现瀑布流展现照片(自动适应窗口大小)

    用瀑布流来展现照片再好不过了,我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了
    2013-04-04
  • DOM事件探秘篇

    DOM事件探秘篇

    本文主要介绍了DOM事件的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS文本获得焦点清除文本文字的示例代码

    JS文本获得焦点清除文本文字的示例代码

    本篇文章主要是对JS文本获得焦点清除文本文字的示例代码进行介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 2007/12/23更新创意无限,简单实用(javascript log)

    2007/12/23更新创意无限,简单实用(javascript log)

    在javascript开发过程中,如果总是使用alert的方式调试程序,在某些简单的程序中是可行的. 但是在通常的项目很复杂,这种方式已经很难满足,企业级开发的需要。
    2007-12-12
  • JavaScript使用canvas实现锚点抠图功能

    JavaScript使用canvas实现锚点抠图功能

    在日常的图片处理中,我们经常会遇到需要抠图的情况,无论是为了美化照片、制作海报,还是进行图片合成,抠图对于我们来说也是一种很常用的功能了,今天就让我们一起来看下怎么使用canvas来实现一个锚点抠图功能
    2024-03-03
  • uni-app中弹窗的使用与自定义弹窗

    uni-app中弹窗的使用与自定义弹窗

    众所周知弹窗在我们实际开发场景中是非常常用的,最近在工作中就遇到了相关需求,所以下面这篇文章主要给大家介绍了关于uni-app中弹窗使用与自定义弹窗的相关资料,需要的朋友可以参考下
    2022-04-04
  • js正则匹配出所有图片及图片地址src的方法

    js正则匹配出所有图片及图片地址src的方法

    这篇文章主要介绍了js正则匹配出所有图片及图片地址src的方法,涉及javascript正则匹配及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 浅析JavaScript中的Proxy对象

    浅析JavaScript中的Proxy对象

    Proxy是JavaScript的一个内置对象,它允许您拦截并自定义对象的行为。本文将和大家简单聊聊JavaScript中Proxy对象的创建与使用,感兴趣的可以了解一下
    2023-03-03
  • Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗,对Bootstrap缩略图与警示窗小编也了解的很少,希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警示窗,从中得到收获。
    2015-11-11

最新评论