javascript - 使下拉菜单消失

Question

我有一个来自 W3schools 的代码，在其中单击按钮后我们会得到下拉菜单。

当我们单击其他任何地方时，下拉菜单不会消失。我上网冲浪了一下，但似乎很困惑，因为我是 js 新手。

如果有人能建议我们如何让它消失，那将会很有帮助？

Code Link

Answer 1

在某处添加以下代码:

document.getElementById("myBtn").onblur = function() {
  document.getElementById("myDropdown").classList.remove("show");
};

您编写的原始代码仅当单击 id“myBtn”元素本身时才会触发添加或删除该元素上的“show”类:

document.getElementById("myBtn").onclick = function() { document.getElementById("myDropdown").classList.toggle("show"); };

但是如果您点击外部，它不会执行任何操作，这就是 onblur 事件的作用。