Javascript 如何通过单击下拉菜单的外部来关闭下拉菜单？

我创建的网站不使用jquery库，只使用纯javascript

大多数用户的互联网带宽都很低，我尽量保持它的干净

我只使用了很少的函数，这就是我决定不使用jquery的原因

我创建了这个折叠菜单，当用户单击容器时，它可以打开和关闭容器。 我还想在用户在其外部单击时将其关闭。 我对javascript不是很有经验，如果有人能给我一些想法，我会非常感激

多谢各位

函数myFunction（）{
var x=document.getElementById（“演示”）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
}
}

可点击下拉列表
单击按钮打开下拉菜单

点击我！

要检测元素外部的点击，您需要捕捉主体本身的点击：

函数myFunction（t）{
var x=document.getElementById（“演示”）；
if（t&&x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
}
event.stopPropagation（）；
}

可点击下拉列表
单击按钮打开下拉菜单

点击我！

您可以使用简化逻辑。当您单击子菜单选项时，是否打算关闭此功能？@larz由于事件传播，您可以禁用此功能it@Lashane谢谢你，它工作正常，接受了你的建议answer@Lashane在我测试了您建议的解决方案后，我发现其他函数不起作用。我读了这篇文章，似乎停止活动不是一个好的做法propagation@John解决方案是检测主体上的点击，事件传播是另一个问题，声明全局处理程序并检测其中的点击