javascript - Hide element when focus lost - Stack Overflow

admin管理员组

文章数量:1278920

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.

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.

• javascript
• jquery
• css
• drop-down-menu
• show-hide

Share Improve this question Follow edited Mar 14, 2012 at 14:13 Jivings 23.3k77 gold badges6262 silver badges102102 bronze badges asked Mar 14, 2012 at 14:10 ClemClem 11.8k88 gold badges3535 silver badges4848 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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.

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

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

Check http://jsfiddle/ZuLHb/1/

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

本文标签： javascriptHide element when focus lostStack Overflow