Javascript 单击“外部”关闭下拉列表

我希望能够关闭我的下拉菜单，不仅通过点击x，而且通过点击它的外部。我的js代码似乎不起作用。Javascript是从我放在某处的模板复制的，但我实际上无法修复它以使其正常工作

window.onclick=函数关闭菜单（）{
if（document.getElementById（“下拉内容”）.style.left！=“-300px”）{
var dropdown=document.getElementById（“下拉内容”）；
var i；
对于（i=0；i

。下拉式内容{
位置：固定；
背景色：rgb（255、255、255）；
宽度：300px；
身高：100%；
/*盒影：0px 8px 16px 0px rgba（0,0,0,0.2）*/
z指数：600；
过渡：0.3s；
}
#下拉内容{
左：-300px；
z指数：600；
}

---

如果您只使用普通javascript，可以向侦听

事件的
文档
对象添加
事件监听器
，单击
事件并检查下拉列表的某些条件，检查它是否已打开，如果已打开，则关闭，如果未打开，则不执行任何操作

比如：

document.addEventListener('click', () => {
  const dropdown = ... // grab dropdown element
  if (isOpened(dropdown)) closeDropdown()
})

编辑：你也应该检查点击是否发生在你的下拉列表之外，因为点击也会被触发。为此，您可以使用

将其保留为：

document.addEventListener('click', (e) => {
  const dropdown = ... // grab dropdown element
  if (dropdown.contains(e.target)) return; // if the clicked element is inside the dropdown or it's the dropdown itself, do nothing
  if (isOpened(dropdown)) closeDropdown()
})


const x=document.querySelector（'.x'）；
const ul=document.querySelector（'ul'）；
x、 addEventListener（'单击'，（）=>{
ul.classList.toggle（'show'）；
});
document.addEventListener（'click'({
目标
}) => {
if（target.matches（'.x'）==false）{
ul.classList.remove（'show'）；
}
});
ul{
显示：无；
}
ul.show{
显示：块；
}
X

试验
试验
试验
试验
检查这样的样式是一种脆弱的处理方式——如果主题样式发生变化，则必须更新脚本。您应该使用CSS类，可能是在body元素或其他祖先上。请提供HTML以便我们可以复制。您听说过使用
s的
吗？下拉菜单是屏幕外的…它不是为此而设计的，但您可以这样做：哦，是的！错过了你应该检查点击是否在你的下拉菜单之外，在几分钟内编辑我的评论。我不知道我是否做了一些非常错误的事情，但如果我替换了。。。用我的document.getElementById（“下拉内容”）不是吗？不幸的是，到目前为止，该代码无法打开下拉菜单。不，只有在单击除下拉菜单之外的任何内容时，该代码才会关闭下拉菜单。但是打开下拉菜单没有任何作用，这是另一个问题。是的，我看到了，但我仍然使用我发布的原始代码来打开菜单，它不再工作了。我不知道如何帮助你，因为这完全是另一个问题。我建议您在下拉列表打开时添加一个类或其他内容，因为它使用广泛且易于检查。尽量不要依赖于元素的样式，因为如果样式改变，它会破坏一切。如果合适，请将答案标记为正确：）