Javascript-форум - Обход элементов (открывашка)

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Обход элементов (открывашка) (https://javascript.ru/forum/misc/67793-obkhod-ehlementov-otkryvashka.html)

Обход элементов (открывашка)

Привет. Простите это 301 тема про открывашку.

Вопрос такой у меня есть код

https://codepen.io/dzheysen/pen/xqRdWX?editors=1010

но он видит лиш первые элементы. Т.е нужен обход сделать это как-о через рекурсию или другим способом. Я лично не могу понять как это сделать.

при клике открываеться только первый элемент. Не обходит все элементы.

dzho,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">


.popular-view-list {
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.popular-view-list ~ div .checkbox-down {
  display: none;
}
.popular-view-list.active ~ div .checkbox-down {
  display:  block;
}
  </style>

  <script>
 window.addEventListener('DOMContentLoaded', function() {
  var items = document.querySelectorAll(".item");
    [].forEach.call(items, function(item) {
        var itemTitle = item.querySelector(".popular-view-list");
        itemTitle.addEventListener("click", function(e) {
             itemTitle.classList.toggle("active")
       })
    })
 });
  </script>
</head>

<body>
<div class="item">
      <div class="popular-view-list" >list one</div>
   <div class="col-sm-6">
     <div class="checkbox-down">
      <div class="checkbox-wrapper">
        <input type="checkbox" id="popular-checkbox__column-two-number-three" value="Washing machine">
        <label for="popular-checkbox__column-two-number-three">Washing machine</label>
      </div>

      <div class="checkbox-wrapper">
        <input type="checkbox" id="popular-checkbox__column-two-number-four" value="Free wireless internet">
        <label for="popular-checkbox__column-two-number-four">Free wireless internet</label>
      </div>
    </div>
</div>


   <div class="col-sm-6">
     <div class="checkbox-down">
      <div class="checkbox-wrapper">
        <input type="checkbox" id="popular-checkbox__column-two-number-three" value="Washing machine">
        <label for="popular-checkbox__column-two-number-three">Washing machine</label>
      </div>

      <div class="checkbox-wrapper">
        <input type="checkbox" id="popular-checkbox__column-two-number-four" value="Free wireless internet">
        <label for="popular-checkbox__column-two-number-four">Free wireless internet</label>
      </div>
    </div>
</div>
</div>

</body>
</html>

Рони, огромное спасибо.
Опиши пожалуйста как работает эта строчка
[].forEach.call(items, function(item) {

Цитата:

Сообщение от dzho

как работает эта строчка

коллекции-не-массивы