Javascript 全部展开/全部折叠按钮js

我正在使用本教程创建一些可折叠文件。我想创建两个按钮，可以折叠或扩展所有可折叠的文件。 我已经包括了我正在使用的代码片段。我似乎无法创建两个工作按钮，所以我刚刚发布了当前正在使用的代码

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

.可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.活动，.可折叠：悬停{
背景色：#555；
}
.可折叠：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
}

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

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

这就是你想要实现的目标，对吗？这只是一个使用jQuery的示例。您可以根据需要对其进行修改

$（'.item'）。在（'click'，'.header'，function（）上{
$（'.item'）.removeClass（'show'））
$（this.parent（）.toggleClass（'show'））
})

.item{
边框：1px实心#ddd；
保证金：5px；
}
.标题{
填充：10px；
光标：指针；
}
.内容{
身高：0；
溢出：隐藏；
过渡：所有0.3秒缓解；
边框顶部：1px实心#ddd；
}
.item.show.content{
高度：自动；
溢出：自动；
}

项目1
内容1
项目1
内容2

这是您的代码扩展

我想这就是你要的

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i{
var content=span.nextElementSibling；
var条件；
var结果；
开关（x）{
案例错误：
条件=content.style.maxHeight==content.scrollHeight+“px”；
结果=空；
打破
大小写正确：
条件=content.style.maxHeight==null | | content.style.maxHeight==“”；
结果=content.scrollHeight+“px”；
打破
违约：
}
如果（条件）{
span.classList.toggle（“活动”）；
content.style.maxHeight=结果；
}
});
}

.可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.活动，.可折叠：悬停{
背景色：#555；
}
.可折叠：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
}

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

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

这不是jquery——正如标题所示。