Javascript 如果用户单击屏幕上的任何位置，如何关闭菜单？

我有以下代码，它执行以下操作： 1：用户单击按钮，可打开或关闭下拉菜单 2：用户单击webslides元素中的任何位置，如果显示，它将关闭菜单

问题是webslides位于按钮下方，我希望用户也单击标题，以便在显示菜单时不显示菜单，但这不起作用。相反，无论我尝试点击按钮多少次打开菜单，按钮都不会显示菜单

var menu=document.getElementsByClassName（“下拉内容”）[0]；
var header=document.getElementById（'header'）；
var webslidesBody=document.getElementById（'webslides'）；
函数课SelectionFunction（）{
如果（menu.style.display==“无”）{
menu.style.display=“block”；
}否则{
menu.style.display=“无”；
}
}
webslidesBody.onclick=函数（）{
menu.style.display=“无”；
}
header.onclick=函数（）{
menu.style.display=“无”；
}

选课
//HTML内容的其余部分。。。。。。。。。。。。

您正在将函数添加到标题和按钮onclick，以便它们“同时”运行，因为按钮是标题的子项，并且样式不会更改

相关代码以及您的问题的一个可能解决方案：

    var button = document.getElementsByClassName('dropbtn')[0];
    ...
    header.onclick = function(event) {
      if (event.target !== button)
        menu.style.display = "none";
    }

测试一下：

var menu=document.getElementsByClassName（“下拉内容”）[0]；
var header=document.getElementById（'header'）；
var webslidesBody=document.getElementById（'webslides'）；
var button=document.getElementsByClassName（'dropbtn'）[0]；
函数课SelectionFunction（）{
如果（menu.style.display==“无”）{
menu.style.display=“block”；
}否则{
menu.style.display=“无”；
}
}
webslidesBody.onclick=函数（）{
menu.style.display=“无”；
}
header.onclick=函数（事件）{
如果（event.target！==按钮）
menu.style.display=“无”；
}

选课
//HTML内容的其余部分。。。。。。。。。。。。

如果你能发布一个工作代码，那就容易多了。