hide a DIV when the user clicks on a button or outside of it - Almost there
<p>I have an "Options" button on my webpage. When the user click on that button, a little submenu appear.</p>

<p>When I click outside that menu, it closes. So far so good.  </p>

<p><strong>My problem is that when I click again on the option button(when the menu is visible), the menu stays open. It should close.</strong> </p>

<p>Here's the code that manage the "click outside" functionality</p>

<pre><code>$j(document).mouseup(function(e) {
   var container = $j('.playlist-menu');

   if (container.has(e.target).length === 0) {
      container.hide();
   }
});
</code></pre>

<p>And the event on the button</p>

<pre><code>$j('#options').click(function() {   
    $j('.playlist-menu').toggle();
});
</code></pre>

<p>The HTML structure:</p>

<pre><code>&lt;button id="options" class="float-left" title="Options" type="button"&gt;
&lt;div class="playlist-menu display-none"&gt;
   &lt;ul&gt;
       ...
   &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I don't understand why its not closing when I click a second time on the option button, the e.target of that button is not 'playlist-menu' so why is the menu not closing??</p>

<p>Thanks</p>
