javascript - 延迟关闭 Bootstrap 下拉菜单

Question

我正在尝试修改 Bootstrap 下拉菜单的行为。首先，我想防止在您单击页面其他位置时关闭下拉菜单。我用这段代码做到了:

$('#filters').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});

现在，我想在您单击其中的链接时延迟关闭下拉列表。我想这样做是因为在您实际离开页面并加载新页面之前，当您单击链接时下拉菜单会立即关闭。

这里是 a fiddle到目前为止我所拥有的。

Answer 1

这个怎么样DEMO

我想建议你两件事:

• add eventlisteners on .btn-group instead of #filters as its easy enough to check which dropdown was clicked
• Add the required animations to click event instead

所以根据上面的建议，代码如下:

$('.btn-group').on({
    "shown.bs.dropdown": function () {
        this.closable = false;
    },
    "click": function () {
        this.closable = true;
            if(!$(this).hasClass('open'))
                $(this).find('.dropdown-menu').stop(true, true).slideToggle();
            else
                $(this).find('.dropdown-menu').stop(true, true).delay(600).slideToggle();

    },
    "hide.bs.dropdown": function () {
        return this.closable;
    }
});

更新:

根据您的评论，我希望这是您希望实现的目标:

DEMO

$('.btn-group').on({
    "shown.bs.dropdown": function () {
        this.closable = false;
    },
        "click": function () {
            this.closable = true;
            $('.btn-group').not($(this)).find('.dropdown-menu').stop(true, true).slideUp();//Close all the dropdowns except this
            if(!$(this).hasClass('open'))
            {
                $(this).find('.dropdown-menu').stop(true, true).slideToggle();//open only this dropdown
                $('.btn-group').not($(this)).removeClass('open'); //remove the focus effect from other dropdowns
            }
            else
                $(this).find('.dropdown-menu').stop(true, true).delay(600).slideToggle();

    },
        "hide.bs.dropdown": function () {
        return this.closable;
    }
});