Javascript 一次显示一个下拉列表并关闭其他下拉列表

我有两个下拉菜单，当用户单击它们时显示。默认情况下，它们是隐藏的。是否有方法关闭未单击的下拉列表？。例如，单击“汽车”菜单后，“客户”菜单应关闭

/*单击客户端、车辆文件或模块时显示下拉列表*/
var dropdown=document.getElementsByClassName（“dropdownbtn”）；
var i；
/*循环浏览所有下拉按钮，在隐藏和显示其下拉内容之间切换*/
对于（i=0；i

。下拉列表btn{
边界：无；
背景：无；
光标：指针；
大纲：无；
文本转换：大写；
字体系列：LinetoCircular；
显示：块；
左侧填充：20px；
z指数：0；
}
#包装纸{
显示器：flex；
}
/*默认情况下隐藏，在标题下移动内容*/
.下拉式容器{
显示：无；
字号：18px；
填充顶部：10px；
背景色：#575757；
}
.下拉式容器a{
颜色：白色；
左侧填充：30px；
}
.下拉式容器a:悬停{
背景色：#4141；
}

客户






汽车

要执行所需操作，请循环浏览所有

。下拉列表btn

元素，并隐藏与单击按钮无关的元素：

Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
  if (el !== dropdownContent)
    el.style.display = 'none';
});

var dropdown=document.getElementsByClassName（“dropdown btn”）；
var i；
对于（i=0；i{
如果（el！==下拉内容）
el.style.display='none'；
});
if（dropdownContent.style.display==“块”）
dropdownContent.style.display=“无”；
其他的
dropdownContent.style.display=“block”；
});
}

。下拉列表btn{
边界：无；
背景：无；
光标：指针；
大纲：无；
文本转换：大写；
字体系列：LinetoCircular；
显示：块；
左侧填充：20px；
z指数：0；
}
#包装纸{
显示器：flex；
}
/*默认情况下隐藏，在标题下移动内容*/
.下拉式容器{
显示：无；
字号：18px；
填充顶部：10px；
背景色：#575757；
}
.下拉式容器a{
颜色：白色；
左侧填充：30px；
}
.下拉式容器a:悬停{
背景色：#4141；
}

客户






汽车

这很好用，谢谢。我还有最后一个问题，每个下拉列表有两个箭头。就像这里的

svg\u arrow\u

就在客户机和汽车的div下面。如何将未显示下拉列表的箭头向后旋转？。现在，我在显示它们时旋转它们。单击父对象时，您可以修改div的内容。但是，如果不看一个例子，很难准确地说出你需要做什么。我建议开始一个新问题，最好是在JS中引入一个新类

.expanded

，并切换这个类-这样你就可以扩展下拉菜单和子菜单上的行为，而无需更改JS-即使它们后来被引入html。@Rorymcrossan我做了，这里是链接@你能试着编辑我的新问题吗？我无法使用插入符号。