bootstrap V4.x 中 dropdown 增加 hover事件（优化）

Posted 2022-12-15 猎人在吃肉

文章目录

• • 1、bootstrap 版本说明
  • 2、方法1（推荐）
  • • 2.1、js 代码
    • 2.2、使用说明
    • 2.3、其它参数配置
  • 3、方法2：
  • 4、转载

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

说明：
上面的 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 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>

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 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：

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

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

4、转载

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

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