Question

My document click function isn’t hiding my menu when I click the document outside of my menu. When I click the img it shows the menu and when I click the img 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.

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() });
 })

Answer 1

I had a similar problem and solved it with the following code:

$("body").mouseup(function(){ 
    if (visible) {
        $('.dropdownlist .menu').hide();
         visible = false;
    }
});

instead of your $(document).not(.. code.