如何使用纯JavaScript在下拉列表中构建可折叠选项

我正在尝试构建一个自定义下拉列表，其中包含可折叠选项。 下拉列表中的每个选项都有子选项，选中这些子选项后，将为我提供值

在摘要上，下拉列表应如下所示：

考虑到上述想法，我尝试了我的方法

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

.main div{
显示：内联块；
填充：15px；
宽度：180px；
光标：指针；
边框：1条实心鲑鱼；
}
.内分区{
位置：绝对位置；
宽度：210px；
顶部：58px；
左：8px；
高度：300px；
边框：1条实心鲑鱼；
}
.内部分区>ul{
列表样式类型：无；
底边：1条实心鲑鱼；
保证金：5px；
填充：10px；
}
.内部分区>ul>跨度{
显示：内联；
}
.内部分区acc输入{
位置：绝对位置；
不透明度：0；
}
.内部分区acc输入：选中~ acc子类别{
显示：块；
}
.内部分区附件子类别{
显示：无；
溢出：隐藏；
}

选择项目


第一组

项目1
项目2

根据您的图片多次重写您的代码。请看一看

您可以从

.drop box

中删除

.active

，这样菜单将在开始时折叠

在按钮和菜单元素周围添加了

。下拉框

，带有

位置：相对因此，您的下拉菜单带有
位置：绝对将取决于父位置

.drop button:after、.link:before
这些是箭头，它们在
.active
类上旋转，如您所见

已更新

现在JS支持在元素
下拉框的外部单击并关闭它（删除
.active
）。虽然您可以添加多个结构类似于我的示例的
.drop box
元素，但它们都将单独工作


for（让document.queryselectoral的dropbox（'.dropbox'））{
让dropButton=dropbox.querySelector（“.dropButton”）；
让dropMenu=dropbox.querySelector（“.dropMenu”）；
document.body.addEventListener（“单击”，函数（e）{
设target=e.target | | e.src元素；
if（target！==dropbox&&！isChildOf（target，dropbox））{
dropbox.classList.remove（“活动”）；
}
}，假）；
函数isChildOf（子函数、父函数）{
if（child.parentNode==父）{
返回true；
}else if（child.parentNode==null）{
返回false；
}否则{
返回isChildOf（child.parentNode，parent）；
}
}
dropButton.addEventListener（“单击”，函数（e）{
dropbox.classList.toggle（“活动”）；
for（让dropMenu.querySelectorAll（'.link'）的链接）{
link.classList.remove（“活动”）；
}    
}，假）；
设xx=0；
for（让dropMenu.querySelectorAll（'.link'）的链接）{
（功能（索引）{
link.addEventListener（“单击”，函数（）{
设yy=0；
for（让dropMenu.querySelectorAll（'.link'）的链接）{
如果（索引！==yy）{
links.classList.remove（“活动”）；
}          
yy++
}
this.classList.toggle（“活动”）；
})
})（二十）；
xx++；
}
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
.投递箱{
位置：相对位置；
显示：内联块；
}
.下拉按钮{
显示：内联块；
填充：10px；
光标：指针；
边框：1px实心#000；
背景：#fff；
}
.下拉按钮：在，
链接：以前{
内容：''；
边框：5px实心透明；
边框顶部颜色：#000；
框大小：边框框；
显示：内联块；
利润率：0.3倍；
变换：旋转（-90度）；
}
.drop-box.active.drop按钮：在，
.link.active:before{
变换：旋转（0度）；
}
.下拉菜单{
显示：无；
位置：绝对位置；
宽度：210px；
最高：100%；
左：0px；
边框：1px实心#000；
背景：#fff；
}
.下拉框.活动.下拉菜单{
显示：块；
}
.下拉菜单.链接{
填充：10px；
光标：指针；
}
.下拉菜单.box{
显示：无；
填充：0 10px 10px 10px；
}
.下拉菜单.链接.活动+.框{
显示：块；
}
.下拉菜单.框标签{
显示：块；
}

选择项目1
第一组
方框1
方框2
第2组
方框3
方框4
选择项目2
第3组
方框5
方框6
第4组
方框7
方框8
请检查此问题嗨，Kevin，我不愿意使用jquery，而且状态似乎没有保留。您可以使用
HTML元素。你不需要JS，如果你需要一些解释或改进-告诉我。事实上，我们错过了这里的东西，下拉菜单只有在点击选择项时才会关闭，但理想情况下，我们也应该在点击下拉列表中的任何位置时将其关闭。还可以对其进行修改，就像一次只打开一个组，其他组应折叠一样？？感谢您帮助我更好地回答：）完全重写代码，使其更短、更可读、更易于实现。现在支持多个dpropdowns。