javascript - 我想用子菜单制作一个侧边栏。我尝试了一下，但我遇到了一些错误

Question

我使用 选择标签getElementsByClassName，还选择下拉菜单，getElementsByClassName并在标签上添加一个单击事件侦听器，该侦听器在下拉列表中添加隐藏类，但它不起作用，请帮助。

这是html代码：-

<li>
  <a href="#" class="label">
    <span>Profile</span>
  </a>
  <ul class="dropdown-menu">
    <li>Dropdown</li>
    <li>Dropdown2</li>
    <li>Dropdown3</li>
  </ul>
</li>

<li>
  <a href="#" class="label">
    <span>Profile</span>
  </a>
  <ul class="dropdown-menu">
    <li>Dropdown</li>
    <li>Dropdown2</li>
    <li>Dropdown3</li>
  </ul>
</li>

<li>
  <a href="#" class="label">
    <span>Profile</span>
  </a>
  <ul class="dropdown-menu">
    <li>Dropdown</li>
    <li>Dropdown2</li>
    <li>Dropdown3</li>
  </ul>
</li>

const Nav = document.getElementsByClassName("label");
const NavUl = document.getElementsByClassName("dropdown-menu");

  Nav.addEventListener("click", function () {
    NavUl.classList.toggle("dpNon");
  });

我想dpNon用dropdown-menu.

标签： javascriptdrop-down-menunavbar

Answer 1

To get the desired result you will need to select all elements like before with document.getElementsByClassName("label"). Then loop the result, attach an event listener and then find the dropdown menu. Then you could toggle the class.

const nav = document.getElementsByClassName("label");

Array.from(nav).forEach(element => {
   element.addEventListener("click", (e) => {
      //Find dropdown-menu from parent
      e.preventDefault();
      const target = element.parentNode.querySelector(".dropdown-menu");
      //
      if (!target) {
         return;
      }
      
      //Find openmenu
      const openMenu = target.parentNode.parentNode.querySelector(".dpNon");
      //deactivate openMenu if openMenu is not the target 
      if (openMenu && openMenu !== target) {
        openMenu.classList.remove("dpNon")
      }
      
      //toggle class
      target.classList.toggle("dpNon");
   })
});

.dropdown-menu {
  display: none;
}

.dropdown-menu.dpNon{
  display: block;
}

<li>
  <a href="#" class="label">
    <span>Profile</span>
  </a>
  <ul class="dropdown-menu">
    <li>Dropdown</li>
    <li>Dropdown2</li>
    <li>Dropdown3</li>
  </ul>
</li>

<li>
  <a href="#" class="label">
    <span>Profile</span>
  </a>
  <ul class="dropdown-menu">
    <li>Dropdown</li>
    <li>Dropdown2</li>
    <li>Dropdown3</li>
  </ul>
</li>

<li>
  <a href="#" class="label">
    <span>Profile</span>
  </a>
  <ul class="dropdown-menu">
    <li>Dropdown</li>
    <li>Dropdown2</li>
    <li>Dropdown3</li>
  </ul>
</li>