切換與點擊效果

Question

可能重複：
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> 

它正在正確的菜單，但我的要求是，當用戶點擊了側這塊它去和我想要的切換效果的另一種效果，切換效果對我來說工作正常，但是當我點擊那個包裝的一側時#rightNavToggle它不會熄滅。我的另一個要求是，當用戶點擊其子導航時，子導航應該關閉。 使用的Java腳本

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

Answer 1

只是做了一個簡單的例子基於@syrion ref。 http://jsfiddle.net/cfmitrah/5grcu/