javascript - 实现可折叠 : how to determine which section is open?

Question

我有一个物化可折叠物，它按预期工作。类似于:

<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 类单独添加到打开的可折叠项目中。因此，您可以使用它来了解打开了哪个可折叠项目。

你可以使用这个 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