如何在CSS/JavaScript中创建半自动打开可折叠文件

在可折叠文件中有可折叠文件，我希望在单击第一个级别时打开第一个级别下的所有级别

例如，如果我点击第一幕，我希望场景1和场景2下的所有内容，包括所有片段，在点击第一幕时打开

下面是我对基本编码的尝试，它本身就起作用。我只需要找出如何将增加的难度结合起来

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
背景色：#0486C1；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.主动，
.可折叠：悬停{
背景色#254062；
}
.可折叠的：：之后{
内容：“\002B”；
左边距：5px；
}
.collappable.active:：after{
内容：“\2212”；
}
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#E2；
过渡段：最大高度0.2s放松；
}
p{
颜色：#000000；
}

第一幕
第一场
片段1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段2
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段3
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

场景2
片段1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段2
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段3
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

您可以执行以下操作：

const collapsables=document.queryselectoral（“.collapsables”）；
可折叠。forEach（可折叠=>{
可折叠的.addEventListener（“单击”，函数（）{
打开（这个）；
const children=this.nextElementSibling.queryselectoral（'.collapsable'）；
儿童。forEach（开放）；
});
});
功能打开（元素）{
元素.classList.toggle（“活动”）；
var content=element.nextElementSibling；
如果（content.style.display==“块”）{
content.style.display=“无”；
}否则{
content.style.display=“block”；
}
}

。可折叠{
背景色：#0486C1；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.主动，
.可折叠：悬停{
背景色#254062；
}
.可折叠的：：之后{
内容：“\002B”；
左边距：5px；
}
.collappable.active:：after{
内容：“\2212”；
}
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#E2；
过渡段：最大高度0.2s放松；
}
p{
颜色：#000000；
}

第一幕
第一场
片段1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段2
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段3
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

场景2
片段1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段2
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

片段3
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

我建议的方法如下：

//我已选择使用“let”来定义