把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');
});