Javascript 在外部单击时关闭多个框下拉列表

有多个下拉列表，在本例中有三个（但可以是任意数字），它们具有可切换的下拉列表。但是，如果您单击所有按钮，它们都将保持打开状态。当另一个被激活时，当有外部点击时，我如何使其关闭

小提琴：

for（document.queryselectoral的const按钮（'button'））{
按钮。addEventListener（'单击'，（e）=>{
button.nextElementSibling.classList.toggle（“下拉可见”）；
});
}

.container{
显示器：flex；
}
.盒子{
高度：100px；
宽度：100px；
位置：相对位置；
右边距：20px；
}
.下拉列表{
高度：100px；
宽度：100%；
位置：绝对位置；
背景：红色；
最高：100%；
右：0；
显示：无；
}
。下拉列表可见{
显示：块；
}

方框1
切换
下拉内容
方框2
切换
下拉内容
方框3
切换
下拉内容

问题有两个部分。要在隐藏其他下拉列表的同时切换当前下拉列表，您可以选择所有下拉列表，并使用

filter（）

在隐藏所有其他下拉列表的同时排除当前下拉列表

若要在单击发生在

按钮

或

之外时隐藏所有下拉列表，可以将事件处理程序绑定到
文档
，该文档检查事件的来源。然后，如果用户单击按钮或下拉列表，则可以忽略该事件；如果用户在这些元素之外单击，则可以隐藏所有下拉列表


let buttons=document.querySelectorAll（'button'）；
let dropdowns=document.querySelectorAll（'.dropdown'）；
//切换下拉列表
buttons.forEach（button=>button.addEventListener（'click'，e=>{
让targetDropdown=e.target.nextElementSibling；
数组.from（dropdowns）.filter（dd=>dd！=targetDropdown）.forEach（dd=>dd.classList.remove（'dropdown-visible'）；
targetDropdown.classList.toggle（'dropdown-visible'）；
}));
//在外部图元上单击时隐藏下拉列表
document.addEventListener（'click'，e=>{
if（e.target.classList.contains（'dropdown'）| | e.target.tagName==='BUTTON'）
返回；
dropdowns.forEach（dd=>dd.classList.remove（'dropdown-visible'）；
});
.container{
显示器：flex；
}
.盒子{
高度：100px；
宽度：100px；
位置：相对位置；
右边距：20px；
}
.下拉列表{
高度：100px；
宽度：100%；
位置：绝对位置；
背景：红色；
最高：100%；
右：0；
显示：无；
}
。下拉列表可见{
显示：块；
}

方框1
切换
下拉内容
方框2
切换
下拉内容
方框3
切换
下拉内容
问题有两个部分。要在隐藏其他下拉列表的同时切换当前下拉列表，您可以选择所有下拉列表，并使用
filter（）
在隐藏所有其他下拉列表的同时排除当前下拉列表

若要在单击发生在
按钮
或
之外时隐藏所有下拉列表，可以将事件处理程序绑定到
文档
，该文档检查事件的来源。然后，如果用户单击按钮或下拉列表，则可以忽略该事件；如果用户在这些元素之外单击，则可以隐藏所有下拉列表


let buttons=document.querySelectorAll（'button'）；
let dropdowns=document.querySelectorAll（'.dropdown'）；
//切换下拉列表
buttons.forEach（button=>button.addEventListener（'click'，e=>{
让targetDropdown=e.target.nextElementSibling；
数组.from（dropdowns）.filter（dd=>dd！=targetDropdown）.forEach（dd=>dd.classList.remove（'dropdown-visible'）；
targetDropdown.classList.toggle（'dropdown-visible'）；
}));
//在外部图元上单击时隐藏下拉列表
document.addEventListener（'click'，e=>{
if（e.target.classList.contains（'dropdown'）| | e.target.tagName==='BUTTON'）
返回；
dropdowns.forEach（dd=>dd.classList.remove（'dropdown-visible'）；
});
.container{
显示器：flex；
}
.盒子{
高度：100px；
宽度：100px；
位置：相对位置；
右边距：20px；
}
.下拉列表{
高度：100px；
宽度：100%；
位置：绝对位置；
背景：红色；
最高：100%；
右：0；
显示：无；
}
。下拉列表可见{
显示：块；
}

方框1
切换
下拉内容
方框2
切换
下拉内容
方框3
切换
下拉内容