Question

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

当我们点击其他地方时，下拉菜单不会消失。我有点冲浪，但它似乎令人困惑，因为我是js的新手。

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

Answer 1

在某处添加以下代码：

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

您编写的原始代码仅在单击此元素本身时触发在“myBtn”元素上添加或删除“show”类：

document.getElementById（“myBtn”）。onclick = function（）{ 的document.getElementById（ “myDropdown”）classList.toggle（ “播放”）。 };

但如果你点击外面没有任何作用，那就是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

使用此：

＆＃13;

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

＆＃13;

＆＃34;的onblur＆＃34;是失去焦点的事件

Make Dropdown菜单消失

3 个答案: