title: document click to hide menu
body: <p>My document click function isn't hiding my menu when I click the document outside of my menu. When I click the <code>img</code> it shows the menu and when I click the <code>img</code> again it hides it but when I document click I want it to hide the menu does any one know what I'm doing wrong and how to make it work.</p>
  
  <pre><code>var visible = false;
  var id = $(this).attr('id');
  
  $(document).not('#' + id + ' div:eq(1)').click(function () {
      if (visible) {            
          $('.dropdownlist .menu').hide();
          visible = false;
      }
  });    
  
  
  $(this).find('div:eq(1)').click(function (e) {
       var menu = $(this).parent().find('.menu');
  
       if (!visible) {
           menu.show();
           visible = true;
       } else if (visible) {
           menu.hide();
           visible = false;
       }
       menu.css({ 'left': $(this).position().left + $(this).width() - menu.find('ul').width(), 
                  'top': $(this).position().top + $(this).height() });
   })
  </code></pre>