我需要的很简单。

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

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

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


当前回答

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

更新1:

同样的问题

其他回答

这是我使用jQuery使它下拉悬停

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

最简单的解决方案是CSS。加上一些像……

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

工作小提琴

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

更新1:

同样的问题

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

用悬停触发单击事件有一个小错误。如果鼠标进入,然后点击会产生相反的效果。鼠标移出时打开,鼠标移进时关闭。一个更好的解决方案:

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