如何通过单击页面中的其他位置来取消切换下拉菜单 - stopPropagation？

Question

我想知道是否有人可以帮助最终解决我不久前提出的问题。

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

请参阅此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');
});

这是一个更新的小提琴： jSFiddle

编辑：以下内容就职于 FF & Chrome 浏览器
新小提琴： 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：工作小提琴可以在这里找到：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;
});