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

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

1 个答案: