悬停按钮下拉菜单中的Bootstrap

Question

我希望鼠标悬停时出现下拉菜单。这是我的代码的jsbin：link

尝试过jquery：

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

但它不起作用......

Answer 1

在Bootstrap Dropdown with Hover中，这是使用CSS而不是JavaScript修复的。如果您将接受的答案的解决方案更改为

.navbar .btn-group:hover > .dropdown-menu {
    display: block;
}

它应该与您的示例代码一起使用。

Answer 2

您可以使用内部Bootstrap API：

$(document)
   .on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)

Answer 3

试试这个

jQuery(function ($) {
    $('.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();
    });
    $('.navbar .dropdown > a').click(function () {
        location.href = this.href;
    });
});