Similar 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>
The menu is functioning correctly, but I want it to close when the user clicks outside of the block. Additionally, I would like to add a toggle effect that activates when clicking on #rightNavToggle wrap. The current toggle effect works, however, it does not close when clicking outside of the block. Another requirement is for the sub navigation to also close when its link is clicked. Using JavaScript.
$("#SettingOpt a").click(function() {
var parent = $(this).parent();
parent.toggleClass("selected");
parent.find("div.userMenu").toggle();
});