How to choose one out of two identical dropdowns?

  • 0
    When you click on a dropdown-item, the dropdown-menu block should be displayed, which is nested exactly in the dropdown-item on which the click occurred. How can this be done?

    <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>
    JavaScript Anonymous, Jul 13, 2019

  • 1 Answers
  • 0
    . 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');
    }
    });
    });
    });
    Lilah Bowen

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!