Hide element when focus lost

Question

I'm working on drop down menu with css and jquery. I wish to be menu open until I click something or until I click out of the menu.

This is what I have tried:

$('#optionButton').click(function() {
$('#dropMenu').css('visibility' , 'visible')    //optionButton clicked, menu visible
});

$('*').not('#optionButton').click(function() {
$('#dropMenu').css('visibility' , 'hidden') //clicked eanithing else: menu close
});

But it doesn't work how I expected.

Answer 1

When you click on an DOM object, it does event bubbling, which means it starts from the most specific object and bubbles up the DOM tree until it gets to the document object. You can prevent an event from bubbling up the DOM treee by returning false .

$(document).click(function() {
  $('#dropMenu').hide();
});

$('#optionButton').click(function() { 
  $('#dropMenu').show();
  return false;
});

Notice how I used the hide and show methods instead of css('visibility' , 'visible/hidden') . These two actually do slightly different things , nut if you just wanted to hide an element, the hide method is the easiest way to do it in jQuery.

You can see a working example of this on jsFiddle .

Answer 2

Try this:

$("body").click(function(e) {
    if ( e.target.id === "optionButton" ) {
        $("#dropMenu").css("visibility", "visible");
    }
    else {
        $("#dropMenu").css("visibility", "hidden");
    }
});

Or, the shorter version of the same thing:

$("body").click(function(e) {
    $("#dropMenu").css("visibility", ( e.target.id === "optionButton" ? "visible" : "hidden" ));
});

Answer 3

I did the experiment with CSS only. May be it's work for your.

Check http://jsfiddle.net/ZuLHb/1/

Answer 4

You can bind a click event on the document to closez the mùeny:

$(document).click(function() {
    $('#dropMenu').css('visibility' , 'hidden') //clicked eanithing else: menu close
});

The important part is that you stop event propagation on the click event of the #optionButton , otherwise the event will bubble up to the document and execute the click handler attached to it:

$('#optionButton').click(function(e) {
    $('#dropMenu').css('visibility' , 'visible')    //optionButton clicked, menu visible
    e.stopPropagation();
});

DEMO