Javascript 焦点丢失时隐藏元素

我正在使用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
});

---

但是它没有达到我预期的效果。

您可以绑定文档上的单击事件来关闭mùeny：

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

重要的一点是，在

#optionButton

的click事件上停止事件传播，否则事件将冒泡到文档并执行附加到文档的click处理程序：

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

试试这个：

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

---

当您单击一个DOM对象时，它会发生事件冒泡，这意味着它从最特定的对象开始，并在DOM树中冒泡，直到到达

文档

对象。通过返回

false

，可以防止事件在DOM树中冒泡

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

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

注意我是如何使用

hide

和

show

方法而不是

css（'visibility'，'visible/hidden'）

。实际上，如果您只想隐藏一个元素，

hide

方法是在jQuery中实现这一点的最简单方法

---

你可以看到一个。

我只是用CSS做了这个实验。也许这是你的工作

---

选中

则需要为

$（“#optionButton”）返回一个
假
。但单击

。实际上需要停止传播。