使下拉菜单消失

Question

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

当我们单击其他任何地方时，下拉菜单不会消失。 我已经冲浪了一点，但作为 js 的新手，这似乎令人困惑。

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

代码链接

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事件的作用。

Answer 2

<script>
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {
myFunction()
};
document.getElementById("myBtn").onblur = function() {
myFunction();
};
/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>

Answer 3

使用这个：

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

"onBlur"是失去焦点的事件