Javascript 物化可折叠：如何确定哪个部分是打开的？

我有一个物化可折叠的，它的工作原理和预期的一样。类似于：

<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>

标题1


标题2

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

我如何确定哪个部分是打开的

---

我想一种可能是在选中节时将节的索引存储在一个隐藏元素中，但我不知道如何操作。

物化ECSS将一个

活动的
类单独添加到一个打开的可折叠项中。因此，您可以使用它来了解哪个可折叠项处于打开状态

您可以使用以下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;
  }

})

$（文档）。在（“单击”，“ul.collappable li”，函数（）上）{
var elem=document.queryselectoral（“ul.collappable li”）；
var index=“无”
对于（变量i=0；i

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

以下是完整的示例：
请注意，如果在
中添加了其他类，则必须使用.includes（“active”）方法，而不仅仅是检查是否相等
if（elem[i].className.includes（“active”）{……