Как вывести подпункт конкретного пункта в меню?

Question

[FlapJalc]

Реализую меню на JS.

<button class="nav__toggle" type="button">Открыть</button>

<ul class="nav__list">
  <li class="nav__item"><a href="#">Пункт 1</a></li>
  
  <li class="nav__item">
    <a href="#">Пункт 2</a>
    <ul class="nav__sublist">
      <li>Пункт 2.1</li>  
      <li>Пункт 2.2</li>
    </ul> 
  </li>
  
  <li class="nav__item">
    <a href="#">Пункт 3</a>
    <ul class="nav__sublist">
      <li>Пункт 3.1</li>
      <li>Пункт 3.2</li>
    </ul> 
  </li>
  
  <li class="nav__item"><a href="#">Пункт 4</a></li>
  
</ul>

Открытие меню по кнопке реализовал следующим образом:

var navToggle = document.querySelector(".nav__toggle");

navToggle.addEventListener("click", function(event) {
  event.preventDefault();

  var navList = document.querySelector(".nav__list");

  if (!navList.classList.contains("nav--show")) {
    navList.classList.add("nav--show");
  } else {
    navList.classList.remove("nav--show");
  }
});

Действиями выше я отобразил просто пункты меню при клике по кнопке. Но как теперь реализовать открытие подпунктов этого меню?
Решил сделать так: если следующий элемент после тега <a> возвращает НЕ undefined, значит в этом пункте есть подпункт

var navItem = document.querySelectorAll(".nav__item > a");

for (var i = 0; i < navItem.length; i++) {
	if (navItem[i].nextElementSibling != undefined){
	  console.log(navItem[i])
	};
}

Но как мне теперь отображать эти подпункты при клики на них?
https://codepen.io/anon/pen/vwaaqV

Answer 1

[0xD34F]

document.querySelector('.nav__list').addEventListener('click', function(e) {
  const sub = e.target.nextElementSibling;
  if (sub && sub.classList.contains('nav__sublist')) {
    sub.classList.toggle('nav--show');
  }
});

Comments

[FlapJalc]

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

[0xD34F]

FlapJalc, preventDefault.

[FlapJalc]

0xD34F, Это мне понятно. Я имею ввиду в приведённом Вами решении как это реализовать? e.preventDefault(); вообще все ссылки отрубает, что логично так как он на все ссылки распространяется. Внутри тела условия тоже не срабатывает.

[0xD34F]

FlapJalc, вы сейчас предлагаете мне догадаться, чего у вас там "не отрабатывает", "отрубает" и т.д. Так не будет. С вас ссылка на песочницу, где будет продемонстрирована проблемная ситуация, плюс объяснения: как проблему воспроизвести (последовательность действий пользователя); как проблема проявляется; как должно быть.

[FlapJalc]

0xD34F Так я приложил ссылку на песочницу когда создавал тему: https://codepen.io/anon/pen/vwaaqV
и даже дополнил её Вашим решением.
Последовательность действий:
1. Пользователь жмём на кнопку "Открыть меню".
2. Появляется двухуровневое меню. Все пункты в меню являются ссылками на определённые страницы.
3. При клике на пункты, которые имеют подпункты, должно появляться меню второго уровня (т.е эти самые подпункты). И в вашем решении оно появляется, но в это же время срабатывает ссылка и происходит переход на другую страницу. Т.е у пунктов которые имеют подпункты нужно отменить переход по ссылке при клике. У пунктов которые не имеют подпунктов, не отменять. Если я применяю preventDefault, у меня ни одна ссылка в меню не работает.

[0xD34F]

FlapJalc,

я приложил ссылку на песочницу когда создавал тему <...> дополнил её Вашим решением

Говоря иначе - испортили вопрос. На будущее - подобных "дополнений" делать не надо. Вопросы вы здесь публикуете не только для себя (вот так сюрприз).

Все пункты в меню являются ссылками на определённые страницы.

Тоже "дополнение" - ссылок было что-то не видать, когда открывал в первый раз. Да и враньё это - первый же пункт ни на какую "определённую страницу" не ведёт. Но это ничего - "дополните" ещё раз, да?

Если я применяю preventDefault, у меня ни одна ссылка в меню не работает.

Ну, неправильно значит применяете. Надо только в случае, если подпункт был найден:

if (sub && sub.classList.contains('nav__sublist')) {
  e.preventDefault();

[FlapJalc]

0xD34F Ладно, не злитесь. Извиняюсь, что возможно заставил понервничать. Спасибо за помощь.