展开全部并折叠所有可折叠的手风琴，使CSS变为现实

Question

以下是在物化CSS框架下制作的可折叠手风琴的代码段。我试图在单击按钮时展开所有手风琴项目，并在单击另一个按钮时关闭所有手风琴。而且一次只能看到一个按钮。

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

如果有人可以指导如何在工作阶段实现这一目标，我将非常感激。

Just another silly value
Some silly value
I'm functA
I'm functB
Traceback (most recent call last):
  File "/tmp/slots.py", line 41, in <module>
    c.slot3='Slot does not exists then assignment couldn\'t be accepted'
AttributeError: 'C' object has no attribute 'slot3'

$('.collapsible').collapsible();

function expandAll() {
  $(".collapsible-header").addClass("active");
  $(".collapsible").collapsible({
    accordion: false
  });
  $("#expand").fadeOut();
$("#collapse").fadeIn();
}

function collapseAll() {
  $(".collapsible-header").removeClass(function() {
    return "active";
  });
    $("#expand").fadeIn();
$("#collapse").fadeOut();
  $(".collapsible").collapsible({
    accordion: true
  });
  $(".collapsible").collapsible({
    accordion: false
  });
}

.collapsible li.active i {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.collapsible-header i {
  position: absolute;
  right: 0px;
}
#collapse{
 display:none;
}

Answer 1

您需要调用可折叠对象的实例才能在其上调用.open()或.close()。

您可以使用Materialize的Collapsible.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 !： https://codesandbox.io/s/mm9w7wl0l9

Answer 2

使用@Jim 回答有 2 个问题。

正如他所说，您需要 Collapsible 的实例来关闭或打开。事实是，您不想打开或关闭 Collapsible 自己，而是他的孩子。

让我解释一下。

来自 Materialise 文档：

<块引用>

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

.open();

打开可折叠部分。

参数

整数：要打开的第 N 个部分。

instance.open(3);

正如人们所说，使用 open() 方法（以及 close() 方法），您可以为可折叠的 部分 提供一个参数，实际上谁是您的孩子想要打开或关闭。

不指定参数将具有添加或删除“活动”类的效果（该类用于实现部分是否打开），仅适用于 Collapsible 实例的第一个子项。

因此，在@Jim 显示的示例中，第一个问题是使用按钮展开所有可折叠对象只会为第一部分添加“活动”类。所以手动收起这一段会有取消收起按钮触发目的的效果：

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

这是由于 Materialise 打开和关闭可折叠对象的方式，如您在 materialize.js 文件中看到的：

function open(index) {
  var _this8 = this;
  var $collapsibleLi = this.$el.children('li').eq(index); // <-- Materialize get all the children of the collapsible element
  if ($collapsibleLi.length && !$collapsibleLi[0].classList.contains('active')) {
    ...
    $collapsibleLi[0].classList.add('active'); // <-- Here the 'active' class is only added to the first element
    ...
  }
}

function close(index) {
  var $collapsibleLi = this.$el.children('li').eq(index); // <-- Get children
  if ($collapsibleLi.length && $collapsibleLi[0].classList.contains('active')) {
    ...
    $collapsibleLi[0].classList.remove('active'); // <-- Same here
    ...
  }
}

第二个问题是当您展开所有部分时，因为只有第一个部分具有“活动”类，单击另一个部分不会关闭它而是重新打开它（通过添加“活动”类）：

最后，如果你想避免这 2 个问题，你需要打开和关闭 Collapsible 实例的每个部分。

这样做将确保您的可折叠物品清晰地打开和关闭

var instance = M.Collapsible.getInstance($('.collapsible'));
const children = instance.$el[0].children.length
for (var i = 0; i < children; i++) {
  instance.open(i) // or instance.close(i)
}

不要忘记将可折叠手风琴选项设置为 false。

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

Here 是@Jim 的分叉项目，具有非问题解决方案。