我想制作一个带有子菜单的侧边栏。我试过了，但我遇到了一些错误

Question

我 select 使用 getElementsByClassName 的标签以及 select 使用 getElementsByClassName 的下拉菜单，我在标签上添加了一个点击事件侦听器，它添加了在下拉菜单中隐藏 class 但它不起作用，请帮忙。

这是 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 class 和 dropdown-menu。

Answer 1

要获得想要的结果，您需要 select 所有元素，就像之前 document.getElementsByClassName("label") 一样。然后循环结果，附加一个事件侦听器，然后找到下拉菜单。然后你可以切换 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>

我想制作一个带有子菜单的侧边栏。我试过了，但我遇到了一些错误

I want to make a sidebar with submenu. i try it but i face some error

javascript

navbar

drop-down-menu