Как из двух одинаковых дропдаунов выбирать один?

Question

[Максим]

При клике на dropdown-item должен отображаться блок dropdown-menu который вложен именно в тот dropdown-item на котором произошел клик. Как возможно это реализовать?

<ul class="menu">
  <li class="dropdown-item">
    <span>Dropdown menu item</span>
    <div class="dropdown-menu d-none">
      <ul class="dropdown-list">
        <li>Dropdown item 1</li>
        <li>Dropdown item 2</li>
      </ul>
      <!-- / .dropdown-list -->
    </div>
    <!-- / .dropdown-menu -->


  </li>
  <!-- / .dropdown-item -->
  <li>
    <span>Menu item</span>
  </li>
  <!-- / li -->
  <li class="dropdown-item">
    <span>Dropdown menu item 2</span>
    <div class="dropdown-menu d-none">
      <ul class="dropdown-list">
        <li>Second Dropdown item 1</li>
        <li>Second Dropdown item 2</li>
      </ul>
      <!-- / .dropdown-list -->
    </div>
    <!-- / .dropdown-menu -->
  </li>
  <!-- / .dropdown-item -->
</ul>

Answer 1

[Тигран Абрамян]

.active { display: none }

const lists = document.querySelectorAll('.dropdown-list');
lists.forEach(list => list.classList.add('active'));

document.querySelectorAll('.dropdown-item span').forEach((item, itemIndex) => {
  item.addEventListener('click', function() {
    lists.forEach((list, listIndex) => {
      if (itemIndex === listIndex) {
        list.classList.toggle('active');
      }
    });
  });
});

Comments

[Максим]

спасибо