实现可折叠：如何确定哪个部分是打开的？

Question

我有一个 materialize collapsible，它按预期工作。类似于：

<ul class="collapsible">
  <li>
   <div class="collapsible-header">Title1</div>
   <div class="collapsible-body" />
  </li>
  <li>
   <div class="collapsible-header">Title2</div>
   <div class="collapsible-body" />
  </li>
</ul>

在后面的过程中，当按下按钮时，我需要一个 javascript 函数来根据打开的部分修改其行为。

如何确定哪个部分是开放的？

我想一种可能是在隐藏元素中存储该部分被选中时的索引，但我不知道该怎么做。

Answer 1

Materializecss 将 active class 添加到一个打开的可折叠项目本身。因此您可以使用它来了解打开了哪个可折叠项目。

您可以使用此 jquery 代码：

$(document).on("click","ul.collapsible li", function(){

  var elem = document.querySelectorAll("ul.collapsible li");
  var index = "none"

  for (var i = 0; i < elem.length; i++) {
    if (elem[i].className == "active") {
        index = i;
    }
    document.getElementById("show").innerHTML = index;
  }

})

此代码为您显示打开的可折叠项目的索引。

这是完整的示例：jsFiddle

实现可折叠：如何确定哪个部分是打开的？

materialize collapsible: how to determine which section is open?

javascript

materialize