之前在 [Drupal] Bootstrap 下拉選單 提過將 click 下拉選單改成 hover 下拉選單,但只適用於 Bootstrap 3。
以下是適用 Bootstrap 4.1.2 以上的作法 [1]
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);