Question

I have the following markup:

<a href="" id="clickMe">Click Me</a>

<div id="foo" style="border:1px solid red; display:hidden"></div>

My code to get the “foo” div to show on click.

$('#clickMe').click(function(e) {
    $('#foo').show();
    e.preventDefault();
});

Now how can I hide the div again IF THE USER CLICKS ANYWHERE ON THE PAGE EXCEPT THE DIV ITSELF OR THE CLICK ME LINK?

Note: I need to be able to do this without changing the markup.

Answer 1

$('#clickMe').click(function(e) {
    $('#foo').show();
    e.preventDefault();
});


$("#clickMe, #foo").mouseup(function(){return false;});

$(document).mouseup(function(e){//removes menu when clicked on any other part of page
    if($("#foo:visible").length > 0  ){
        $('#foo').hide();
    }
});

Example on JSFIDDLE.net