javascript - 如何通过单击页面中的其他位置取消下拉列表 - stopPropagation？

Question

我想知道是否有人可以帮助最终解决我前阵子在 SO 上提出的问题。

我无法通过单击按钮外部或页面上的其他任何位置来取消切换这些下拉菜单。

请看这个 jsFiddle .

我见过人们使用 stopPropagaton() 但我不确定如何在这里应用它。

有什么办法吗？

我的切换代码:

var cur = null;
$(".toggle").click(function(e){
    $('#nav ul:visible').hide();

    if(cur == null || cur.currentTarget != e.currentTarget)
    {
        if(cur != null)
        {
            $(cur.currentTarget)
                .children('a:first').children('span').removeClass('fc-state-active');
        }

        cur = e;
        $(cur.currentTarget)
            .children('a:first').children('span').addClass('fc-state-active');
        $(cur.currentTarget)
            .children('ul').show();
    }
    else
    {
        $(cur.currentTarget)
            .children('a:first').children('span').removeClass('fc-state-active');

        cur = null;
    }
});

Answer 1

我相信以下内容对您有用。这利用了 jQuery 的 focusout() 函数:

$(".toggle").click(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
    $(this).children('a:first').children('span').addClass('fc-state-active');
    $(this).children('ul').show();
}).focusout(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
});

这是一个更新的 fiddle :jSFiddle

编辑:以下适用于 FF 和 Chrome新 fiddle :jsFiddle

$(".toggle").click(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
    $(this).children('a:first').children('span').addClass('fc-state-active');
    $(this).children('ul').show();
    hide = false;
}); 
$(document).click(function(){
    if(hide){
        $('#nav ul:visible').hide();
        $('span.fc-state-active').removeClass('fc-state-active');
    }
    hide = true;
});

原因:$(document).click()在$(".toggle").click() 之后被称为

编辑 2:工作 fiddle 可以在这里找到:jSFiddle

var hide;
$(".toggle").click(function(){
    var active_span = $(this).children('a:first').children('span');   
    var active_ul = $(this).children('ul');

    $(active_span).toggleClass('fc-state-active');
    $("span.fc-state-active").not(active_span).removeClass('fc-state-active');
    $(active_ul).toggle();
    $("#nav ul:visible").not(active_ul).hide();
    hide = false;   
});
$(document).click(function(){
    if(hide){
        $('#nav ul:visible').hide();
        $('span.fc-state-active').removeClass('fc-state-active');
    }
    hide = true;
});