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.

score 4 · Answer 1 · edited May 23 '17 at 12:19

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.

score 3 · Accepted Answer · answered Mar 14 '12 at 14:13

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

sandeep · Answer 3 · 2012-03-14T15:12:46.547

3

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

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

edited Mar 14 '12 at 15:12

answered Mar 14 '12 at 15:06

sandeep

91,313
23
137
155

score 2 · Answer 4 · answered Mar 14 '12 at 14:12

2

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

answered Mar 14 '12 at 14:12

Didier Ghys

30,396
9
75
81

One would need a `return false` for the `$('#optionButton').click` though. – Yoshi Mar 14 '12 at 14:14
Stopping propagation is actually what is needed. – Didier Ghys Mar 14 '12 at 14:18

Hide element when focus lost

4 Answers4