markdown Drupal下拉菜单脚本（包括下拉标题而不是链接的菜单项）

Posted 2021-05-05

First create a menu, including at least one submenu (or else you don't need a dropdown script, do you?) Note that if you want a menu item to be a dropdown title without itself linking to another page, you can use `#` for its link address.[^nolink] In this case, a menu item is produced that looks like `<a href>Some Item</a>`. The href key exists, but no value is defined.

[^nolink]: Drupal 8.7.1 seems to be allowing me to use `#` as the link for a menu item (Note that `ctools`, `links`, and `custom menu links` modules are installed -- if this behavior is non-standard it might be due to one of them). 

Then use a script like the following:

```js
// 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) {
    console.log(event);
    let toggle = event.target;
    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.target.closest(".navmenu__menu-item--has-dropdown");
    let link = dropdownMenu.querySelector("a");
    // if it's not already open, clicking a menu item should open the dropdown 
    if (!(dropdownMenu.classList.contains('open'))) {
      event.preventDefault();
      dropdownMenu.classList.add("open");
    } else if (link.getAttribute("href") == '#' || link.getAttribute("href") == '') {
      // if there's no href, then clicking an open menu a second time should just toggle the menu closed
      event.preventDefault();
      dropdownMenu.classList.remove("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");
    }
  }

})();

```