如何在悬停时制作Bootstrap的下拉菜单？

Question

如何让twitter bootstrap的菜单下拉列表悬停而不是点击？

Answer 1

1.Hide 下拉菜单上的鼠标悬停.

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

2.Hide 下拉菜单上点击.

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    });
});

http://jsfiddle.net/7yMsQ/1/

Answer 2

虽然如何在悬停而不是点击上制作Twitter引导菜单下拉列表已被大量推崇,使用较新版本的Bootstrap,无需破解它.

http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/是现有dropdown.js的替代品,可让您在悬停时启用.无需修改CSS.

Answer 3

继承了我正在使用的一个函数,让导航栏下拉列表在悬停时向下滑动,而不是仅仅弹出

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});