我需要的很简单。

我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"),它工作得很好。

事情是它工作“onClick”,而我宁愿如果它工作“onHover”。

有什么内置的方法可以做到这一点吗?


当前回答

在Twitter Bootstrap没有实现,但你可以使用这个插件

更新1:

同样的问题

其他回答

你可以使用jQuery的悬停函数。

您只需要在鼠标进入时添加类打开,并在鼠标离开下拉菜单时删除类。

这是我的代码:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

在Twitter Bootstrap没有实现,但你可以使用这个插件

更新1:

同样的问题

更新了一个适当的插件

我已经发布了一个合适的下拉悬停功能插件,在其中你甚至可以定义点击下拉切换元素时会发生什么:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover


既然已经有很多解决方案了,我为什么要这么做?

我对所有之前存在的解决方案都有问题。简单的CSS没有在.dropdown上使用.open类,所以当下拉可见时,下拉切换元素上没有反馈。

js的那些干扰点击.dropdown-toggle,所以下拉菜单显示在悬停,然后隐藏它时,点击一个打开的下拉菜单,移动鼠标将触发下拉菜单再次显示。一些js解决方案制动iOS兼容性,一些插件不工作在现代桌面浏览器支持触摸事件。

这就是为什么我只使用标准的Bootstrap javascript API来防止所有这些问题的Bootstrap下拉悬停插件,没有任何hack。

使用mouseover()函数触发单击。这样就不会对以前的点击事件造成伤害。用户可以使用悬停和点击/触摸。它将是移动友好的。

$(".dropdown-toggle").mouseover(function(){
    $(this).trigger('click');
})

最好的方法是用悬停来触发引导点击事件。这样,它应该仍然保持触摸设备友好

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});