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

please see fiddle.

question #1

if click on "overview" , click again, dropdown toggled/untoggled.

but if click on "overview" once - click on "per x" once - , on, dropdowns remain open.

i have recent dropdown appear, , prior disappear whenever user clicks either outside button, or clicks on button.

question #2

this css (from shaw's fullcalendar) has class

fc-state-active inserted in first <span> when user activates dropdown, replacing fc-state-default. of course, should affect clicked button.

any either issue appreciated!

thanks!

edit:

at point answer @demian brecht gets close solving problem - still can't untoggle dropdown menu clicking anywhere else on screen or clicking same button again.

you can see current state of code @ http://jsfiddle.net/qetgr/

if can give me solution great. thanks.

try #1:

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

edit: (reworked 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 selected menu element here avoid global selector (and additional overhead).

edit:

so, here's i've come (sorry, woulda been sooner, 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 update @ same fiddle url. caveat update user needs click on anywhere on page contains (the base selector body). couldn't figure out nice selector anywhere other nav element (probably nested somewhere in children of document object), i'm tired dig anymore :)

oh, , wasn't happy structure of last update, re-wrote :p