javascript – 延迟关闭bootstrap下拉列表

2019年8月6日 193次阅读

我试图修改引导下拉列表的行为.首先,我想阻止在您单击页面上的其他位置时关闭下拉列表.我用这段代码做到了：

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

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

这是迄今为止我所拥有的a fiddle.

最佳答案 这个
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;
    }
});
点赞