How to untoggle jQuery dropdown clicking elsewhere? (with jsFiddle link)

Please see this Fiddle.

QUESTION #1

If you click on "Overview" and click it again, a dropdown will be toggled/untoggled.

But if you click on "Overview" once - then click on "Per X" once - and so on, all dropdowns will remain open.

I would like to have only the most recent dropdown appear, and the prior disappear whenever the user clicks either outside the button, or clicks on another button.

QUESTION #2

This CSS (from A Shaw's fullCalendar) has a class

开发者_运维技巧fc-state-active which I would like to be inserted in the first <span> when the user activates a dropdown, replacing fc-state-default. Of course, this should only affect the clicked button.

Any help with either issue is greatly appreciated!

Thanks!

EDIT:

At this point the answer by @Demian Brecht gets very close to solving the problem - but still I can't untoggle the dropdown menu by clicking anywhere else on the screen or by clicking the same button again.

You can see the current state of this code at http://jsfiddle.net/qEtgR/

If anyone can give me a solution to this that would be great. Thanks.

Try this for #1:

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

Edit: (reworked for completion)

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

I cache the currently selected menu element here to avoid a global selector (and additional overhead).

Edit:

So, here's what I've come up with (sorry, woulda been sooner, but was away):

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

You can check out the update at the same fiddle URL. The caveat to this update is that a user needs to click on anywhere on the page that contains something (the base selector is body). Couldn't figure out a nice selector for anywhere other than the nav element (probably nested somewhere in the children of the document object), but I'm too tired to dig anymore :)

Oh, and I wasn't happy with the structure of the last update, so I just re-wrote it :P

Question 1: You're only toggling the current li's ul child, so of course the rest stay visible. Try this:

    $(".toggle").click(function(){
  $("#nav ul").slideUp();
  $("ul", this).slideDown();
});

For Question 2, try:

    $("span").removeClass("fc-state-active");
  $("span").addClass("fc-state-default");
 $("span", this).eq(0).removeClass("fc-state-default");
  $("span", this).eq(0).addClass("fc-state-active");

I'm gonna help you with your first issue:

What I do is I hide all of them and then show the one clicked, like so:

$(".toggle ul").hide();
$("ul",this).toggle();