Javascript 如何创建多层手风琴菜单？

我正在尝试使用纯JavaScript创建一个多层或嵌套的手风琴菜单。除了一个问题外，整个功能正常运行：当我单击菜单的一个元素时，整个功能都会做出反应

这不适用于当前项目。我只是在修完一门基础课程后，试图扩大我的知识面

我知道解决这一问题的简单但繁琐的方法是将函数复制三次，然后专门针对阵列中的每个节点（这是正确的词吗？）。然而，我认为这样做是错误的。如您所见，我试图为多个变量创建一个循环。我认为这可能是我的问题，因为它似乎是将所有这些联系在一起的东西

var accordion=document.getElementsByClassName（“accordion”）；
var dropdown=document.getElementsByClassName（“dropdown”）；
var accordioarrow=document.getElementsByClassName（“accordioarrow”）；
var dropdownArrow=document.getElementsByClassName（“dropdownArrow”）；
var content=document.getElementsByClassName（“内容”）；
函数手风琴函数（）{
对于（j=0，k=0，l=0，m=0；j
正文{
保证金：自动；
宽度：600px；
}
div{
保证金：自动；
}
.手风琴{
背景颜色：浅蓝色；
颜色：白色；
填充：3%；
光标：指针；
宽度：300px；
高度：50px；
}
.手风琴{
边框：纯白；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
变换：旋转（45度）；
}
.下拉列表{
颜色：浅蓝色；
左：3%；
光标：指针；
宽度：300px；
最大高度：0；
溢出：隐藏；
过渡时间：0.2s；
}
.下拉.下拉箭头{
边框：纯色浅蓝色；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
变换：旋转（45度）；
}
.内容{
字体大小：粗体；
过渡：所有0.2秒缓解；
左：5%；
最大高度：0；
溢出：隐藏；
}

主要1
子菜单1
您好。我们暴露了
主要2
子菜单1
您好。我们又暴露了
主要3
子菜单1
您好。我们暴露了三次
通过巧妙地使用
this
关键字（触发事件处理程序的元素）和
nextElementSibling
属性，您可以以更优雅的方式实现这一点

我创建了一个类，使元素的最大高度为0。所以现在我可以通过添加或删除这个类来隐藏和显示元素

在accordion函数中，我在单击的元素之后切换该元素的类，并删除所有其他元素的类

在accordion子菜单中，我只需切换
nextElementSibling
上的类

就我个人而言，我会制作一个不同的html结构，通过使用更多级别的元素，您可以更轻松地切换类，这样您就只需要一个函数来处理x个数量的子菜单。也许对你来说是个不错的新挑战


document.queryselectoral（'.accordion'）.forEach（（accordion）=>accordion.addEventListener（'click'，function（））{
//获取所有可能的隐藏元素并在其上循环。
document.querySelectorAll（'.dropdown，.content'）.forEach（（可折叠）=>{
//如果当前元素相同，则为事件目标的下一个同级元素，切换该类。否则，添加它。
if（可折叠===this.nextElementSibling）{
可折叠的.classList.toggle（'maxHeightZero'）；
}
否则{
可折叠的.classList.add（'maxHeightZero'）；
}
});
}));
document.querySelectorAll（'.dropdown'）.forEach（（dropdown）=>dropdown.addEventListener（'click'，function（））{
//切换nextElementSibling
this.nextElementSibling.classList.toggle（'maxHeightZero'）；
}));
正文{
保证金：自动；
宽度：600px；
}
div{
保证金：自动；
}
.手风琴{
背景颜色：浅蓝色；
颜色：白色；
填充：3%；
光标：指针；
宽度：300px；
高度：50px；
}
.手风琴{
边框：纯白；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
变换：旋转（45度）；
}
.下拉列表{
颜色：浅蓝色；
左：3%；
光标：指针；
宽度：300px；
溢出：隐藏；
过渡时间：0.2s；
}
.下拉.下拉箭头{
边框：纯色浅蓝色；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
变换：旋转（45度）；
}
.内容{
字体大小：粗体；
过渡：所有0.2秒缓解；
左：5%；
溢出：隐藏；
}
.maxHeightZero{
最大高度：0；
}

主要1
子菜单1
您好。我们暴露了
主要2
子菜单1
您好。我们又暴露了
主要3
子菜单1
您好。我们暴露了三次
您正在绑定每个事件侦听器