仅使用 Javascript 的点击功能后打开子菜单

Question

我正在创建一个包含三个子菜单的下拉菜单。我现在的挑战是当我单击父 LI 旁边的箭头图像时能够打开每个子菜单。目前使用我当前的脚本，它只影响第一个父 LI，打开其各自的子菜单。然而，其他两个子菜单并未成为目标。

const arrowButton = document.querySelectorAll(".menu-arrow");
const subMenu = document.querySelector(".sub-menu");

arrowButton.forEach((el) =>
  el.addEventListener("click", () => {
    subMenu.classList.toggle("open");
  })
);

.sub-menu {
  display: none;
}

.sub-menu.open {
  display: flex;
  flex-direction: column;
  background-color: $footer-text;
  width: 60vw;
  margin: 0 auto;
  color: $darkblue-headingtext;
  border-radius: 5px;
}

<ul class="nav__links">
  <li class="parent">
    Product
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Overview</li>
      <li>Pricing</li>
      <li>Marketplace</li>
      <li>Features</li>
      <li>Integrations</li>
    </ul>
  </li>
  <li class="parent">
    Company
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>About</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Careers</li>
    </ul>
  </li>
  <li class="parent">
    Connect
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Contact</li>
      <li>Newsletter</li>
      <li>LinkedIn</li>
    </ul>
  </li>
</ul>

Preview of what Im building

我将不胜感激任何提示！谢谢！！

Answer 1

问题是您使用querySelector 只选择第一个找到的元素。但是您可以使用通过每个事件侦听器提供的事件本身，并使用event.target 获取单击的目标。然后您可以简单地使用nextElementSibling 选择下一个元素，但在开发过程中子菜单的位置可能会发生变化，因此最好使用.parentElement 选择该目标的父级，然后像上面那样选择子菜单类.querySelector(".sub-menu")。

工作示例：

const arrowButton = document.querySelectorAll(".menu-arrow");

arrowButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.querySelector(".sub-menu");
    subMenu.classList.toggle("open");
  })
);

.sub-menu {
  display: none;
}

.sub-menu.open {
  display: flex;
  flex-direction: column;
  background-color: $footer-text;
  width: 60vw;
  margin: 0 auto;
  color: $darkblue-headingtext;
  border-radius: 5px;
}

<ul class="nav__links">
  <li class="parent">
    Product
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Overview</li>
      <li>Pricing</li>
      <li>Marketplace</li>
      <li>Features</li>
      <li>Integrations</li>
    </ul>
  </li>
  <li class="parent">
    Company
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>About</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Careers</li>
    </ul>
  </li>
  <li class="parent">
    Connect
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Contact</li>
      <li>Newsletter</li>
      <li>LinkedIn</li>
    </ul>
  </li>
</ul>

Answer 2

使用这行const subMenu = document.querySelector(".sub-menu");，您将始终获得第一个元素，这就是为什么无论单击哪个节点都会打开第一个菜单的原因。您需要将子菜单节点next 获取到单击的元素：

arrowButton.forEach((el) =>
  el.addEventListener("click", () => {
    const subMenu = el.parentNode.querySelector(".sub-menu");
    subMenu.classList.toggle("open");
  })
);

Answer 3

const arrowButton = document.querySelectorAll(".menu-arrow");

arrowButton.forEach((el) =>
  el.addEventListener("click", (e) => {
    e.target.nextElementSibling.classList.toggle("open");
  })
);