javascript - 如何取消点击其他地方的 jQuery 下拉菜单？ (带有 jsFiddle 链接)

Question

请see this Fiddle .

问题#1

如果您单击“概述”并再次单击，下拉菜单将被切换/取消切换。

但是，如果您单击“概述”一次 - 然后单击“Per X”一次 - 依此类推，所有下拉菜单都将保持打开状态。

我希望只显示最近的下拉列表，并且每当用户单击按钮外部或单击另一个按钮时，先前的下拉列表就会消失。

问题#2

这个CSS(来自A Shaw的fullCalendar)有一个类

fc-state-active我想将其插入第一个 <span>当用户激活下拉菜单时，替换 fc-state-default 。当然，这应该只影响单击的按钮。

非常感谢您对任一问题的任何帮助!

谢谢!

编辑:

此时@Demian Brecht 的答案非常接近解决问题 - 但我仍然无法通过单击屏幕上的其他任何位置或再次单击相同的按钮来取消切换下拉菜单。

您可以在http://jsfiddle.net/qEtgR/处查看此代码的当前状态。

如果有人能给我一个解决方案，那就太好了。谢谢。

Answer 1

尝试一下#1:

$(".toggle").click(function(){
    $('#nav ul:visible').toggle();
  $('ul',this).toggle();
});

编辑:(重新完成)

var cur = null;
$(".toggle").click(function(){
    $('#nav ul:visible').toggle();
    console.log();
    if(cur != null)
    {
        cur.removeClass('fc-state-active').addClass('fc-state-default');
    }
    cur = $(this).children('a:first').children('span').removeClass('fc-state-default').addClass('fc-state-active');
    $('ul',this).toggle();
});

<强> Fiddle here

我在这里缓存当前选定的菜单元素以避免全局选择器(和额外的开销)。

编辑:

所以，这就是我的想法(抱歉，本来想早点，但我离开了):

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

    if(cur == null || cur.currentTarget != e.currentTarget)
    {
        if(cur != null)
        {
            $(cur.currentTarget)
                .removeClass('fc-state-active')
                .addClass('fc-state-default');
        }

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

        cur = null;
    }
});

$('body').children().not('ul#nav').click(function(e){
    $('#nav ul:visible').hide();

    $(cur.currentTarget)
            .removeClass('fc-state-active')
            .addClass('fc-state-default');

    cur = null;
});

您可以在同一 fiddle URL 上查看更新。此更新需要注意的是，用户需要单击页面上包含内容的任何位置(基本选择器是body)。除了 nav 元素(可能嵌套在 document 对象的子级中的某个位置)之外，无法为 任何地方找到一个好的选择器，但我太累了，无法挖掘不再:)

哦，我对上次更新的结构不满意，所以我重新编写了它:P