материализуется складной: как определить, какой раздел открыт?

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