延迟关闭引导下拉菜单

Question

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

$('#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

怎么样

我想建议你两件事：

• 在.btn-group 上添加eventlisteners 而不是#filters 作为其 很容易检查哪个dropdown被点击了
• 将所需的动画添加到 click 事件中

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

$('.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;
    }
});

Answer 2

好吧，我认为你必须稍微修改一下正常的引导下拉事件序列，但是只有当 this.closable 为真时，你才能使用带有 if/else 的事件来触发延迟 + slideUp()。然后，由于您无法在 hide.bs.dropdown 事件上“返回 true”，因此您必须删除“open”类，然后在下次单击下拉菜单时自己触发“show()”。 . 像这样：

这里有一个可用的下拉菜单 - 如果您有多个下拉菜单，您必须为每个下拉菜单创建唯一 ID，然后可能使用 event.target.[something] 来识别正确的下拉菜单以进行切换...

http://jsfiddle.net/yp44tt9e/2/

$('#filters').on({
    "show.bs.dropdown": function() {
        console.log($(this));
        $(this).find('.dropdown-menu').show();
    },
    "shown.bs.dropdown": function () {
        this.closable = false;
    },
        "click": function () {
        this.closable = true;
    },
        "hide.bs.dropdown": function (e){
            if(this.closable){
                e.preventDefault();
                $(this).find('.dropdown-menu')
                    .first()
                    .stop(true, true)
                    .delay(600)
                    .slideUp('slow', function(){
                        $('.btn-group').removeClass('open');
                    });
             }else{
                return this.closable;
             }
    }
});