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

巴特西

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

最新文章

热门文章