ABROAD:bootstrap中的dropdown组件改造click为hover

140131响应式导航条中的dropdown.png

在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率。

原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件——即把hover同步为clickhover即为click

但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在github上的代码网址:查看

在这儿就直接把代码复制出来:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*
  * Project: Twitter Bootstrap Hover Dropdown
  * Author: Cameron Spear
  * Contributors: Mattia Larentis
  *
  * Dependencies?: Twitter Bootstrap's Dropdown plugin
  *
  * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
  *
  * No license, do what you want. I'd love credit or a shoutout, though.
  *
  */
;( 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出错。

插件支持HTML元素data-*传参,也支持初始化传参。将此js代码放在bootstrap原本的js代码后面执行即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值