Alternar con efecto de clic

Question

Duplicar posibles:
How to detect a click outside an element?

<ul id="rightNav"> 

     <li id="SettingOpt"> 
     <a href="javascript:void(0)">username<span class="fabShopSprite iRecentIcon iUserIcon"></span></a> 
     <div class="userMenu"> 
      <ul> 
      <li><a class="Setting" href="/">Settings</a></li> 
      <li><a class="Setting lastShadow" href="/">Logout</a></li> 
      </ul> 
     </div> 
     </li> 

    </ul> 

Está funcionando correctamente como un menú, pero mi obligación es cuando un usuario haga clic fuera del lado este bloque se va de y otro efecto que quiero cambiar el efecto, el efecto de alternar funciona bien para mí, pero cuando hago clic en el lado de ese ajuste, #rightNavToggle no se activa. Mi otro requisito es que cuando un usuario haga clic en su navegación secundaria, nuevamente, la navegación secundaria se apague. script de Java utilizado

$("#SettingOpt a").click(function() { 
     var parent = $(this).parent(); 
     parent.toggleClass("selected"); 
     parent.find("div.userMenu").toggle(); 
     }); 

Answer 1

acaba de hacer un ejemplo sencillo basado en @syrion ref. http://jsfiddle.net/cfmitrah/5grcu/