Click outside menu to close in jquery
<p>So I have a drop-down menu that shows on a click, as per business requirements. The menu becomes hidden again after you mouse away from it.</p>

<p>But now I am being asked to have it stay in place until user clicks anywhere on the document. How can this be accomplished?</p>

<p>This is a simplified version of what I have now:</p>

<pre><code>$(document).ready(function() {
  $("ul.opMenu li").click(function(){
   $('#MainOptSubMenu',this).css('visibility', 'visible');
  });

  $("ul.opMenu li").mouseleave(function(){
      $('#MainOptSubMenu',this).css('visibility', 'hidden');
  });
});



&lt;ul  class="opMenu"&gt;
  &lt;li id="footwo" class=""&gt;
    &lt;span id="optImg" style="display: inline-block;"&gt; &lt;img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/&gt; &lt;/span&gt;
      &lt;ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;"&gt;
        &lt;li&gt;some&lt;/li&gt;
       &lt;li&gt;nav&lt;/li&gt;
       &lt;li&gt;links&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt; 
</code></pre>

<p>I tried something like this <code>$('document[id!=MainOptSubMenu]').click(function()</code> thinking it would trigger on anything that wasnt the menu, but it didnt work.</p>
