javascript - 在其他地方单击时菜单应该消失

Question

我有一个 div，只要单击一个按钮，它就应该是可见的。这就像一个菜单。之后，当再次单击按钮或用户单击页面上的其他位置(整个主体)时，它应该消失(切换)。

在我目前的方法中，菜单会不断切换，因此两个功能(见下文)都会被触发。

$("#b1").click(function() {
  $("#menu").toggle("slide");
});

$("body").click(function() {
  if ($("#menu").is(":visible")) {
    $("#menu").toggle("slide");
  }
});

我应该如何改进我的代码，以便菜单仅在再次单击按钮或用户单击其他地方时消失？

Here is a fiddle .

Answer 1

使用$(window) 附加事件，然后您可以在任何地方关闭菜单。

$("#b1").click(function() {
  $("#menu").toggle("slide");
   return false;
});

$(window).click(function() {
  if ($("#menu").is(":visible")) {
    $("#menu").toggle("slide");
  }
});

查看演示:https://jsfiddle.net/wru8mvxt/5/