Javascript 展开所有和折叠所有可折叠手风琴物化css

下面是在MaterializeCSS框架下制作的可折叠手风琴的代码片段。我正在尝试在单击按钮时展开所有手风琴项目，并在单击另一个按钮时关闭所有手风琴项目。一次只能看到一个按钮

我编写的js代码在单击按钮时没有显示任何错误，我期望的任务也没有显示任何错误

如果有人能指导如何在工作阶段实现这一点，我将非常感激

$（'.collappable'）.collappable（）；
函数expandAll（）{
$（“.collapsable header”）.addClass（“活动”）；
$（“可折叠”）。可折叠({
手风琴：假
});
$（“#扩展”）.fadeOut（）；
美元（“#崩溃”）.fadeIn（）；
}
函数collapseAll（）{
$（“.collapsable header”）.removeClass（函数（）{
返回“活动”；
});
$（“#展开”）.fadeIn（）；
美元（“#崩溃”）.fadeOut（）；
$（“可折叠”）。可折叠({
手风琴：真的吗
});
$（“可折叠”）。可折叠({
手风琴：假
});
}

可折叠li.active i{
-ms变换：旋转（180度）；
/*IE 9*/
-webkit变换：旋转（180度）；
/*铬、狩猎、歌剧*/
变换：旋转（180度）；
}
.轮换{
-moz过渡：全部.3s线性；
-webkit转换：所有.3s线性；
过渡：全部3秒线性；
}
.可折叠收割台i{
位置：绝对位置；
右：0px；
}
#崩溃{
显示：无；
}

全屏全部展开
全屏_exitCollapse All


弗斯特
进一步扩展
Lorem ipsum dolor sit amet。


第二
进一步扩展
Lorem ipsum dolor sit amet。


第三
进一步扩展
Lorem ipsum dolor sit amet。

您需要调用可折叠文件的实例，以便对其调用

.open（）

或

.close（）

您可以使用Materialize的

可折叠的.getInstance

函数这样做。 将这些行添加到

closeAll（）

和

openAll（）

函数中：

var instance = M.Collapsible.getInstance($('.collapsible'));
instance.open()

var instance = M.Collapsible.getInstance($('.collapsible')); 
instance.close()}

您也不需要将手风琴设置为true或false，您可以删除这些行：

$(".collapsible").collapsible({ accordion: false });

---

CodeSandbox使用expandAll和closeAll演示您的代码：

您需要调用可折叠文件的实例，以便对其调用

.open（）

或

.close（）

您可以使用Materialize的

可折叠的.getInstance

函数这样做。 将这些行添加到

closeAll（）

和

openAll（）

函数中：

var instance = M.Collapsible.getInstance($('.collapsible'));
instance.open()

var instance = M.Collapsible.getInstance($('.collapsible')); 
instance.close()}

您也不需要将手风琴设置为true或false，您可以删除这些行：

$(".collapsible").collapsible({ accordion: false });

---

CodeSandbox使用expandAll和closeAll演示您的代码：

使用@Jim answer有两个问题

正如他所说，您需要关闭或打开

可折叠的

实例。事实上，您不想自己打开或关闭可折叠的

，只想打开或关闭他的孩子

让我解释一下

从Materialize文档中：

可以通过这些方法以编程方式打开和关闭可折叠文件。第二个>参数是要打开的可折叠文件的基于0的索引

.open（）

打开可折叠部分

论据

整数：要打开的第n个部分

实例.开放式（3）

如上所述，使用

open（）

方法（以及

close（）

方法），您可以为可折叠部分提供一个参数，该部分实际上是您要打开或关闭的子部分

不指定参数将仅对可折叠实例的第一个子级具有添加或删除“活动”类（该类是materialize用来了解节是否打开的类）的效果

因此，在@Jim所示的示例中，第一个问题是，使用按钮展开所有可折叠文件将仅为第一部分添加“active”类。因此，手动折叠此部分将具有取消折叠按钮触发目的的效果：

当然，如果你折叠所有的部分，只打开第一个部分，同样的事情也会发生

这是由于Materialize打开和关闭可折叠文件的方式造成的，您可以在

Materialize.js

文件中看到：

功能打开（索引）{
var _this8=此；
var$collapsibelli=this.$el.children（'li'）.eq（index）；//使用@Jim answer有两个问题

正如他所说，您需要关闭或打开
可折叠的
实例。事实上，您不想自己打开或关闭
可折叠的
，而是希望他的孩子打开或关闭

让我解释一下

从Materialize文档中：

您可以通过这些方法以编程方式打开和关闭可折叠文件。第二个>参数是要打开的可折叠文件的基于0的索引

.open（）；

打开可折叠部分

论据

整数：要打开的第n个部分

实例.开放式（3）

如上所述，使用
open（）
方法（以及
close（）
方法），您可以为可折叠部分提供一个参数，该部分实际上是您要打开或关闭的子部分

不指定参数将仅对可折叠实例的第一个子级具有添加或删除“活动”类（该类是materialize用来了解节是否打开的类）的效果

因此，在@Jim所示的示例中，第一个问题是，使用按钮展开所有可折叠文件将仅为第一个部分添加“活动”类。因此，手动折叠此部分将具有取消折叠按钮触发目的的效果：


当然，如果你折叠所有的部分，只打开第一个部分，同样的事情也会发生

这是由于Materialize打开和关闭可折叠文件的方式造成的，您可以在
Materialize.js
文件中看到：

功能打开（索引）{
变量