title: Detect click outside element?
body: <p>Similar to <a href="https://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element">this question</a>, but taking it a step further.  I would like to detect clicks outside of a set of items, which I am handling in the following way:</p>
  
  <pre><code>$('#menu div').live('click', function() {
      // Close other open menu items, if any.
      // Toggle the clicked menu item.
  
      $('body').one('click', function(event) {
          // Hide the menu item.
          event.stopPropagation();
      });
  });
  </code></pre>
  
  <p>This works like a charm, unfortunately, when another menu item is open and a
  second is clicked, it requires two clicks to open the second item.  The first
  click hides the first menu item that was open, the second shows the second menu
  item.</p>
  
  <p>The "correct" behavior works in the following way:</p>
  
  <ul>
  <li>Clicking a menu item opens it. </li>
  <li>Clicking the same menu item (or it's children) closes it.</li>
  <li>Clicking another menu item closes the first, opens the second.</li>
  <li>Clicking away from (open) menu items closes them. </li>
  </ul>
  
  <p>I have tried the following in place of the above <code>$('body').one()</code> order to ignore clicks on menu items with little success:</p>
  
  <pre><code>// Captures click on menu items in spite of the not.
  $('*').not('#menu *').one('click', function() { // Hide menu }
  $('*:not(#menu)').one('click', function() { // Hide menu }
  </code></pre>
  
  <p>As always, thanks for any help!</p>