bootstrap的下拉组件,需要点击click时,方可展示下拉列表。因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框。其实在bootstrap导航条当中dropdown组件用得特别频繁啦!

如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的。细心者可以发现,下拉框出现时,其父级会有一个open的class属性。我们只需要监听hover事件时,给父级增加或删除open类就可以了。

boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看

下面是完整的js插件代码:

// bootstrap响应式导航条
;(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控制

.nav> li:hover .dropdown-menu {display: block;}

这样一句代码也能实现想要的hover效果,只不过如果在hover的时候点击组件,再去hover另一个组件就会出现如下效果:

bootstrap中的dropdown组件扩展hover事件的更多相关文章

  1. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  2. Bootstrap中的 Typeahead 组件

    Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...

  3. chrome中如何查看元素的hover事件

    chrome中如何查看元素的hover事件 一.总结 一句话总结: Elements->Styles里面可以看到":hov":点开选择":hover"就可 ...

  4. bootstrap中对dropdown使用hover代替click

    bootstrap的下拉组件需要点击click才能展示下拉列表,这在使用导航的时候很不方便因此有一个扩展的组件来解决这个问题. 在VS的Nuget中查询bootstrap-hover-dropdown ...

  5. jQuery中多个元素的Hover事件

    1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...

  6. vue组件的hover事件模拟、给第三方组件绑定事件不生效问题

    1.vue里面实现hover效果基本需要用事件模拟 <div @mouseover="overShow" @mouseout="outHide"> ...

  7. Bootstrap中的dropdown、下拉选择框、dropdown-toggle

    注意:如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. <!DOCTYPE html&g ...

  8. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  9. Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

随机推荐

  1. vue-lazyload 图片依赖加载

    一. vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload   (点击里面的demo进入可以查看使用代码  https://git ...

  2. sql优化之concat/concat_ws/group_concat

    原文1:https://baijiahao.baidu.com/s?id=1595349117525189591&wfr=spider&for=pc 原文2:https://www.y ...

  3. MongoDB集群的搭建

    一.环境准备 1.Centos7 2.mongodb3.4.10 3.三台机器IP分别是:192.168.1.100.192.168.1.135.192.168.1.136 二.mongdb数据库的安 ...

  4. Jenkins解析日志(log-parser-plugin)

    Jenkins打包机打包时产生了大量的日志,当报错时,不方便查看error日志 因为日志量太大,查看全部log的时候整个web页面会卡死,所以引用log-parser-plugin可以增加过滤条件显示 ...

  5. 你使用的ie版本过低请。。。

    放到body里面 <body> <!--[if lte IE 8]> <p class="chromeframe">您使用的IE浏览器版本过低. ...

  6. 您可能不知道的CSS元素隐藏“失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

  7. 100-days: twenty-eight

    Title: Lawrence Ferlinghetti's(劳伦斯·费林盖蒂) enduring San Francisco(旧金山) 劳伦斯·费林盖蒂心中的旧金山,历久弥新 费林盖蒂:美国垮掉的一 ...

  8. 学习一下sticky-footer

    什么是sticky-footer? 当页面长度不够长的时候,页脚粘贴在视窗底部:如果页面足够长时页脚会被内容向下推送. 实现方式: 1.负margin布局方式 给内容div加一个父div,设置父div ...

  9. LinkedIn TAG

                 List1  [leetcode]243. Shortest Word Distance最短单词距离 Two Pointers [leetcode]244. Shortest ...

  10. docker 容器 详解

    docker run  ## 创建一个新容器 [root@localhost ~]# docker run --help Usage: docker run [OPTIONS] IMAGE [COMM ...