Как закрывать открытое sub-menu, при клике на пункт меню?

Question

[LastGeneral]

Сейчас при нажатии на пункты меню, они могут открыться оба, а как сделать что бы только один отображался, а второй сразу скрывался? Сейчас они могут открываться оба и это ломает верстку

<ul>
  <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
    <a href="#">Пункт 1</a>
    <ul class="sub-menu">
      <li>Подпункт 1</li>
      <li>Подпункт 2</li>
      <li>Подпункт 3</li>
    </ul>
  </li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom">
    <a href="#">Пункт 2</a>
  </li>
  <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
    <a href="#">Пункт 3</a>
    <ul class="sub-menu">
      <li>Подпункт 1</li>
      <li>Подпункт 2</li>
      <li>Подпункт 3</li>
    </ul>
  </li>
</ul>

.sub-menu { display: none; }
.open .active { display: block; }

document.querySelector('ul').onclick = function(ev) {
let listItem = ev.target.closest('.menu-item-has-children');
  if (!listItem) return
  listItem.classList.toggle('open');
  listItem.querySelector('.sub-menu').classList.toggle('active');
}

Answer 1

[Сергей delphinpro]

1. Скрыть все
2. Открыть нужный

UPD: пример для вдохновения. Не факт, что работает, но задаст нужный вектор в написании своего решения.

const allMenus = document.querySelectorAll('.hasChildren');
function hideOtherMenus(current){
  allMenus.filter(menu => menu != current).forEach(menu => {
    menu.classList.remove('open');
    menu.querySelector('.subMenu').classList.remove('active');
  });
}
allMenus.forEach(menu => {
  menu.addEventListener('click', e => {
    hideOtherMenu(e.target);
    e.target.classList.toggle('open');
    e.target.querySelector('.subMenu').classList.toggle('active');
  })
})

Comments

[LastGeneral]

Так, а как именно открывать нужный?

[Сергей delphinpro]

LastGeneral, у вас уже есть код, открывающий нужный пункт.
Осталось только собрать остальные, отфильтровать из них текущий и скрыть.

[Сергей delphinpro]

LastGeneral, Обновил ответ

[LastGeneral]

Сергей delphinpro, Спасибо