好的，所以我需要的是相当简单的。
我已经设置了一个带有一些下拉菜单的导航栏（使用class="dropdown-toggle" data-toggle="dropdown"），它工作正常。
问题是它有效“ onClick”，而我更喜欢它“ onHover”。
有没有内置的方法来做到这一点？
带有悬停的 Bootstrap 下拉菜单
IT技术
javascript
jquery
html
css
twitter-bootstrap
2021-02-10 20:05:54
6个回答
最简单的解决方案是在 CSS 中。添加类似...
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
最好的方法是通过悬停触发引导程序单击事件。这样，它应该仍然保持触摸设备友好
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
您可以使用 jQuery 的悬停功能。
您只需要open在鼠标进入时添加类并在鼠标离开下拉列表时删除类。
这是我的代码：
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
使用 jQuery 的一种简单方法是：
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});
对于 CSS，当你也点击它时它会变得疯狂。这是我正在使用的代码，它也不会更改移动视图的任何内容。
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});