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

Posted 2022-11-18 猎人在吃肉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap V4.x 中 dropdown 的事件由 click 改成 hover相关的知识，希望对你有一定的参考价值。

1、bootstrap 版本说明

使用 bootstrap 版本是 V4.6.1 。

2、代码内容

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: 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);

2.2、CSS 代码

/** 下面的是扩展样式 **/
.dropdown:hover .dropdown-menu 
  display:block;

2.3、说明

上面的 js、css 一定要放到相应的 bootstrap.js 、 bootstrap.css 的后面（下面）。

3、使用

3.1、最简单的

在原代码上增加 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 Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

3.2、其它配置

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

data-delay ：以毫秒为单位的延迟。默认为500毫秒。
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 Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>