切换点击效果

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/