把bootstrap4 dropdown 的导航下拉菜单触发方式改为鼠标浮动触发

方法1：

原文： https://zzll.org/article/bootstrap4-xialacaidan

很简单，css中加入如下代码

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

.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

修改完成后发现一个小问题，菜单和文字间有一点空隙，鼠标移动到空隙后菜单就隐藏了。

我们再修改 dropdown-menu 的样式，加一个 mt-0 的样式就没有空隙了。

<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
    ...
</div>


另

方法2：

git原文：https://github.com/ibmsoft/twitter-bootstrap-hover-dropdown

这个是bootstrap3的方法，修改后

; (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('show');

$allDropdowns.find(".dropdown-menu").removeClass('show');

}

window.clearTimeout(timeout);

$(this).addClass('show');

$(this).find(".dropdown-menu").addClass('show');

}, function () {

timeout = window.setTimeout(function () {

$this.removeClass('show');

$this.find(".dropdown-menu").removeClass('show');

}, options.delay);

});

});

};

$('[data-hover="dropdown"]').dropdownHover();

})(jQuery, this);

//在你调用的地方里加上 time是你给的反应时间。比如500这样。

$('.dropdown-toggle').dropdownHover(time);

//点击链接如下：

$('a.dropdown-toggle').one('click', function () {

if ($(this).attr('href')!="")

location.href = $(this).attr('href');

});