javascript - 失去焦点时隐藏元素

Question

我正在使用 css 和 jquery 制作下拉菜单。我希望菜单一直打开，直到我点击某些东西或直到我点击菜单之外。

这是我试过的:

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

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

但它并没有像我预期的那样工作。

Answer 1

当您点击一个 DOM 对象时，它会进行事件冒泡，这意味着它从最具体的对象开始，沿着 DOM 树向上冒泡，直到到达 document 对象。您可以通过返回 false 来阻止事件在 DOM 树中冒泡。

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

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

请注意我是如何使用 hide 和 show 方法来代替 css('visibility' , 'visible/hidden') 的。这两个其实do slightly different things , 如果你只是想隐藏一个元素，hide 方法是在 jQuery 中最简单的方法。

你可以看到一个working example of this on jsFiddle .