Блог

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

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

 const navLink = document.getElementsByClassName("menu-item-has-children");

// Loop over main navigation links
for (let i = 0; i < navLink.length; i  ) {
  // Grab specific ID that each mega menu has
  const menuId = document.querySelector(`#${dropDownMenu[i].id}`);
  // On click of top nav items, toggle mega menu visibility (this works).
  navLink[i].addEventListener("click", () => {
    menuId.classList.toggle("display-on");
  });
  // If the mega menu is open (display-on class is active), then don't show the other mega menus.
  // (This does not work).
  return menuId.classList.contains("display-on")
    ? (menuId.style.display = "none")
    : "";
}
 

Ссылка на живую демонстрацию, включая HTML, здесь, если это необходимо.

Спасибо.

Я расширил ваш пример и упростил его. Вы можете увидеть код здесь.

Я использую делегирование событий. Это позволяет обрабатывать все события щелчка (открыть выпадающий список, закрыть выпадающий список с помощью кнопки закрытия) в одном обработчике событий (строка 14 в примере), который, на мой взгляд, легче читать и поддерживать.

В примере также закрывается уже открытое выпадающее меню (см. Строки 21-23).

Я также добавил обработчик событий к объекту document для обработки кликов вне выпадающего списка, чтобы закрыть его, как вы это сделали.

Надеюсь, это решит вашу проблему.

С наилучшими пожеланиями