失去焦点时隐藏元素

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

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

- Clem

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')。这两种方法实际上略有不同,但如果你只想隐藏一个元素，hide方法是在jQuery中最简单的方法。

您可以在jsFiddle上看到一个示例。

- Peter Olson

Answer 2

试试这个：

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

或者，同样的内容的简短版本：

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

- Kevin B

Answer 3

我只使用CSS完成了这个实验，也许对你有用。

请查看http://jsfiddle.net/ZuLHb/1/

- sandeep

Answer 4

您可以在文档上绑定一个点击事件来关闭菜单：

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

重要的部分是在#optionButton的点击事件上停止事件传播，否则事件将冒泡到文档并执行附加到它的点击处理程序：

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

DEMO

- Didier Ghys

---

不过，对于 $('#optionButton').click，需要使用 return false。 - Yoshi

停止传播实际上是所需的。 - Didier Ghys