我需要的很简单。
我已经设置了一个导航栏，其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown")，它工作得很好。
事情是它工作“onClick”，而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
当前回答
对于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');
}
}
});
其他回答
对于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');
}
}
});
更新了一个适当的插件
我已经发布了一个合适的下拉悬停功能插件，在其中你甚至可以定义点击下拉切换元素时会发生什么:
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
既然已经有很多解决方案了，我为什么要这么做?
我对所有之前存在的解决方案都有问题。简单的CSS没有在.dropdown上使用.open类，所以当下拉可见时，下拉切换元素上没有反馈。
js的那些干扰点击.dropdown-toggle，所以下拉菜单显示在悬停，然后隐藏它时，点击一个打开的下拉菜单，移动鼠标将触发下拉菜单再次显示。一些js解决方案制动iOS兼容性，一些插件不工作在现代桌面浏览器支持触摸事件。
这就是为什么我只使用标准的Bootstrap javascript API来防止所有这些问题的Bootstrap下拉悬停插件，没有任何hack。
通过添加属性display:block，在悬停时工作，并在单击时保持关闭;在CSS中删除这些属性data-toggle="dropdown" role="button"从按钮标签
.dropdown:hover .dropdown-menu { display: block; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle">Dropdown Example</button> <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> </body> </html>
你可以使用jQuery的悬停函数。
您只需要在鼠标进入时添加类打开，并在鼠标离开下拉菜单时删除类。
这是我的代码:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
最好的方法是用悬停来触发引导点击事件。这样，它应该仍然保持触摸设备友好
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
