Javascript 如何通过单击页面中的其他位置来取消下拉列表-停止播放？

我想知道是否有人能帮助我最终解决我刚才提到的一个问题

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

请看这个

我见过有人使用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;
    }
});

---

我相信以下几点应该对你有用。这利用了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');
});

这是最新的提琴：

编辑：以下在FF和Chrome中工作 新小提琴：

原因：$document.click在$.toggle.click之后调用

编辑2：可在此处找到工作小提琴：

---

我相信以下几点应该对你有用。这利用了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');
});

这是最新的提琴：

编辑：以下在FF和Chrome中工作 新小提琴：

原因：$document.click在$.toggle.click之后调用

编辑2：可在此处找到工作小提琴：

---

@D Franks，这似乎对FF上的Chrome不起作用-知道为什么吗？Chrome似乎不喜欢发射聚焦。我正在寻找解决方案。找到了解决方案。它没有使用focusout功能，但它在FF和Chrome上都能工作。@D Franks-新的解决方案允许在单击按钮外时关闭-但我不能在单击按钮时关闭菜单-顺便说一句，感谢您在这方面的帮助哇，很抱歉造成所有的混乱！上面的新提琴在Chrome和FF中工作，在导航外单击时隐藏，在单击活动元素时切换可见性。@D Franks，这似乎不适用于Chrome在FF上工作-知道为什么吗？Chrome似乎不喜欢触发聚焦。我正在寻找解决方案。找到了解决方案。它没有使用focusout功能，但它在FF和Chrome上都能工作。@D Franks-新的解决方案允许在单击按钮外时关闭-但我不能在单击按钮时关闭菜单-顺便说一句，感谢您在这方面的帮助哇，很抱歉造成所有的混乱！上面的新提琴在Chrome和FF中工作，在导航外单击时隐藏，在单击活动元素时切换可见性。我找到的最佳解决方案是。我不认为任何其他解决方案会如此简单。我找到的最好的解决方案是。我不认为任何其他解决方案会如此简单。

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;
});