javascript JS for navmenu点击切换，包括点击关闭

Posted 2021-05-03

// Note that this is specifically aimed at the header navmenu
(function() {
  // Toggle the open class on the dropdown menu when the menu toggle is clicked.
  let mainMenuToggles = document.querySelectorAll(".navmenu--header.navmenu--click-to-toggle span.navmenu__expand");

  for (var i = 0; i < mainMenuToggles.length; i++) {
    mainMenuToggles[i].addEventListener("click", handleMainMenuTogglesClicked);
  }

  function handleMainMenuTogglesClicked(event) {
    let toggle = event.toElement;
    let dropdownMenu = toggle.closest('.navmenu__menu-item--has-dropdown');
    dropdownMenu.classList.toggle("open");
  }

// Open the dropdown menu if the user clicks a closed menu link.
// Follow the link if the user clicks an open dropdown menu.
  let mainDropdownMenuLinks = document.querySelectorAll(
    ".navmenu--header.navmenu--click-to-toggle .navmenu__menu-item--has-dropdown > a"
  );

  for (var i = 0; i < mainDropdownMenuLinks.length; i++) {
    mainDropdownMenuLinks[i].addEventListener(
      "click",
      handleDropdownMenuClicked
    );
  }

  function handleDropdownMenuClicked(event) {
    let dropdownMenu = event.toElement.closest(".navmenu__menu-item--has-dropdown");

    if (!(dropdownMenu.classList.contains('open'))) {
      event.preventDefault();
      dropdownMenu.classList.add("open");
    }
  }

// Close the dropdown menu if the user clicks away.
  document.addEventListener("click", handleNonDropdownClicked);

  function handleNonDropdownClicked(event) {
    let openMenu = document.querySelector(".navmenu--header.navmenu--click-to-toggle .navmenu__menu-item--has-dropdown.open");

    if (openMenu == null) {
      return;
    } else {
      let targetElement = event.target;
      do {
        if (targetElement === openMenu) {
          return;
        }
        targetElement = targetElement.parentNode;
      } while (targetElement);

      event.preventDefault();
      openMenu.classList.remove("open");
    }
  }

})();