bootstrap V4.x 中 dropdown 的事件 由 click 成 hover

1、bootstrap 版本说明

使用 bootstrap 版本 是 V4.6.1 。

2、方法1（推荐）

2.1、js 代码

bootstrap-hover-dropdown.js 内容如下：

;(function($, window, undefined) {    
    var $allDropdowns = $();
    $.fn.dropdownHover = function(options) {        
        $allDropdowns = $allDropdowns.add(this.parent());
       
        return this.each(function() {
            var $this = $(this).parent(),
                defaults = {
                    delay: 200,
                    instantlyCloseOthers: true,
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others'),
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $this.hover(function() {
                if(settings.instantlyCloseOthers === true){
                    $allDropdowns.removeClass('show');
                }

                window.clearTimeout(timeout);
                $(this).addClass('show').find(".dropdown-menu").addClass('show');
            }, function() {
                timeout = window.setTimeout(function() {
                    $this.removeClass('show').find(".dropdown-menu").removeClass('show');
                }, settings.delay);
            });
        });
    };

    $('[data-hover="dropdown"]').dropdownHover();
})(jQuery, this);
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

说明：
上面的 js 一定要放到 相应的 bootstrap.js 的后面（下面）。

2.2、使用说明

在原代码上增加 data-hover="dropdown" ，示例如下。

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" >
        Account <b class="caret">b>
    a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Accounta>li>
        <li class="divider">li>
        <li><a tabindex="-1" href="#">Change Emaila>li>
        <li><a tabindex="-1" href="#">Change Passworda>li>
        <li class="divider">li>
        <li><a tabindex="-1" href="#">Logouta>li>
    ul>
li>
1
2
3
4
5
6
7
8
9
10
11
12
13

2.3、其它参数配置

通过属性设置选项，通过 data-delay 和 data-close-others 。

• data-delay ：以毫秒为单位的延迟。默认为 200 毫秒。
• data-close-others ：立即关闭与激活新导航时使用的选择器匹配的所有其他下拉菜单。当您有可能重叠的下拉菜单时，效果很好。默认为 true 。

示例

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
    	 data-delay="1000" data-close-others="false">
        Account <b class="caret">b>
    a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Accounta>li>
        <li class="divider">li>
        <li><a tabindex="-1" href="#">Change Emaila>li>
        <li><a tabindex="-1" href="#">Change Passworda>li>
        <li class="divider">li>
        <li><a tabindex="-1" href="#">Logouta>li>
    ul>
li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、方法2：

只通过 一行 CSS 代码也能解决，但是效果不太好。

/** 下面的是扩展样式 **/
.dropdown:hover .dropdown-menu {
  display:block;
}
1
2
3
4

4、转载

感谢： https://github.com/ibmsoft/twitter-bootstrap-hover-dropdown

演示：https://cameronspear.com/demos/bootstrap-hover-dropdown/