Закрыть раскрывающийся список при нажатии другого

Question

Я работаю над созданием отзывчивой выпадающей панели навигации с ванилью JavaScript. В мобильном представлении я хочу, чтобы при нажатии на один выпадающий список другой закрывался JavaScript здесь:

dropbtns.forEach(link => {
  link.addEventListener("click", function(e) {
    e.currentTarget.nextElementSibling.classList.toggle("showdd");
  });
});

и раскрывающийся список:

  .showdd {
    height: auto;
  }

html код:

<div class="nav-container">
    <div class="brand">
        <a href="#!">Logo</a>
    </div>
    <nav>
        <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
        <ul id="nav-list">
            <li>
                <a href="#!">Home</a>
            </li>
            <li>
                <a href="#!">About</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Services <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Pricing</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Portfolio <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Contact</a>
            </li>
        </ul>
    </nav>
</div>

полный код можно найти здесь .

Answer 1

Итак, если вы хотите свернуть все остальные .nav-dropdown при нажатии, вам просто нужно:

1. Сохранить ссылку .nav-dropdown текущего элемента ( для сравнения позже)
2. Переключите его класс (как вы уже делаете)
3. Go через все остальные .nav-dropdown в вашем дереве DOM и выполните итерации по ним. Если они не соответствуют текущей ссылке, то вы знаете, что выпадающий список принадлежит другой ссылке, и вы можете удалить класс

. С учетом этого мы получим следующий код:

dropbtns.forEach(link => {
  link.addEventListener('click', e => {
    const ownDropdown = e.currentTarget.nextElementSibling;
    ownDropdown.classList.toggle('showdd');

    document.querySelectorAll('.dropbtn + .nav-dropdown').forEach(el => {
      if (el !== ownDropdown)
        el.classList.remove('showdd');
    });
  });
});

Answer 2

Это работает на вашем Codepen после того, как я отредактирую следующую строку.

links.forEach(link => {
  link.addEventListener("click", function(e) {
    links.forEach(link => {
      link.nextElementSibling.classList.remove("showdd"); // Here
    });
    e.currentTarget.nextElementSibling.classList.toggle("show");
  });
});

Кстати, что такое "showdd"?