Блог

Главная - Вопросы по программированию - Показывать / скрывать подменю при нажатии кнопки «Следующий / предыдущий» с помощью ванильного Javascript

Показывать / скрывать подменю при нажатии кнопки «Следующий / предыдущий» с помощью ванильного Javascript

#javascript

#javascript

Вопрос:

У меня есть мобильная выпадающая навигация, <ul class="nav-child"> в которой при нажатии на следующий / предыдущий расширитель должно быть вложенное свертывание / развертывание <li class="deeper"> <button> . Я пробовал использовать siblings и closest, но с ограниченными знаниями JavaScript я не нашел наилучшего способа реализовать их в этом коде.

Вот существующий рабочий код:

 const toggleSubMenus = (() => {
  let parents = document.querySelectorAll(".deeper");
  parents.forEach(function(parent) {
    let btn = parent.querySelector(".js-expand-submenu");
    let child = parent.querySelector(".nav-child");
    btn.addEventListener("click", (e) => {
      parent.classList.toggle("is-expanded");
      child.classList.toggle("expanded");
    }, false);
  });
})();  
 ul ul.is-hidden {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
}

ul ul.expanded {
  max-height: 600px;
}  
 <ul>
  <li class="item deeper parent">
    <a href="#">Item One</a>
    <button class="js-expand-submenu">
      Expander
        </button>
    <ul class="nav-child is-hidden">
      <li class="item deeper parent">
        <a href="#">Sub Item One</a>
        <ul class="nav-child is-hidden">
          <li>
            <a href="#">Sub Sub Menu Item</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Sub Item Two</a>
      </li>
      <li>
        <a href="#">Sub Item Three</a>
      </li>
    </ul>
  </li>
  <li class="item deeper parent">
    <a href="#">Item Two</a>
    <button class="js-expand-submenu">
      Expander
        </button>
    <ul class="nav-child is-hidden">
      <li>
        <a href="#">Sub Item One</a>
      </li>
      <li>
        <a href="#">Sub Item Two</a>
      </li>
      <li>
        <a href="#">Sub Item Three</a>
      </li>
    </ul>
  </li>
  <li class="item deeper parent">
    <a href="#">Item Three</a>
  </li>
</ul>

Комментарии:

1. @Taplar Я не уверен, почему здесь возникает ошибка. Код выполняется при нажатии на кнопки с прикрепленными событиями. В разрабатываемой версии этого кода ошибок нет.

Ответ №1:

Вот мой обновленный код с включенным решением:

 const toggleSubMenus = (() => {
  let buttons = document.querySelectorAll(".js-expand-submenu");
  buttons.forEach(function(button) {
    button.addEventListener("click", (e) => {
      let target = e.target;
      let parent = target.closest(".deeper");
      let child = parent.querySelector(".nav-child");
      parent.classList.toggle("is-open");
      child.classList.toggle("is-expanded");
      document.querySelectorAll(".nav-child.is-expanded").forEach(function(childExpanded) {
        if (childExpanded !== child) {
          childExpanded.classList.remove("is-expanded");
        }
      });
    }, false);
  });
})();  
 ul .nav-child {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
}

ul .nav-child.is-expanded {
  max-height: 600px;
}  
 <ul>
  <li class="item deeper parent">
    <a href="#">Item One</a>
    <button class="js-expand-submenu">
      Expander
        </button>
    <ul class="nav-child">
      <li>
        <a href="#">Sub Item One</a>
      </li>
      <li>
        <a href="#">Sub Item Two</a>
      </li>
      <li>
        <a href="#">Sub Item Three</a>
      </li>
    </ul>
  </li>
  <li class="item deeper parent">
    <a href="#">Item Two</a>
    <button class="js-expand-submenu">
      Expander
        </button>
    <ul class="nav-child">
      <li class="item deeper parent">
        <a href="#">Sub Item One</a>
        <ul class="nav-child">
          <li>
            <a href="#">Sub Sub Menu Item One</a>
          </li>
          <li>
            <a href="#">Sub Sub Menu Item Two</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Sub Item Two</a>
      </li>
      <li>
        <a href="#">Sub Item Three</a>
      </li>
    </ul>
  </li>
  <li class="item deeper parent">
    <a href="#">Item Three</a>
  </li>
</ul>

Комментарии:

1. Просто вопрос. Ваше решение работает с многоуровневыми меню или только с 2-уровневыми? Спасибо