我需要的很简单。

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

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

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


当前回答

悬停在导航项上,看到它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

其他回答

使用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);
    });  
});

更新了一个适当的插件

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

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


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

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

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

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

尝试使用带有淡出淡出动画的悬停功能

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

悬停在导航项上,看到它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

我尝试其他解决方案,我使用bootstrap 3,但下拉菜单关闭得太快,无法移动它

假设您在li中添加class="dropdown",我添加了一个超时

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});