单击父级时仅打开一个子菜单

Question

我正在尝试构建带有子菜单的菜单。我使用 forEach 循环遍历菜单项，并在其中使用 for 循环显示该特定菜单的子菜单。但是，当我单击父菜单时，所有子菜单都会出现（下面的示例 1）

我对 Javascript 还很陌生。有没有办法来解决这个问题？或者是更好的方法？

谢谢！

示例 1

这里是JS代码：

const navMobile = document.querySelector(".mobile-nav");
const menuLink = navMobile.childNodes;
const subMenu = document.querySelectorAll(".mobile-submenu");

menuLink.forEach((link) => {
  link.addEventListener("click", () => {
    subMenu.forEach((sublink) => {
      sublink.classList.toggle("mobile-submenu-visible");
      sublink.classList.remove("collapse");
    });
  });
});

HTML

<ul class="mobile-nav">
            <li class="nav-menu-element">
            <a href="#" class="nav-link-mobile">  Product
              <img
                src="./images/icon-arrow-dark.svg"
                class="arrow-nav-mobile"
                alt=""
              /></a>
              <ul class="mobile-submenu collapse">
                <li>Overview</li>
                <li>Pricing</li>
                <li>Marketplace</li>
                <li>Features</li>
                <li>Integrations</li>
              </ul>
            </li>
          
            <li class="nav-menu-element">
              <a href="#" class="nav-link-mobile">Company
              <img
                src="./images/icon-arrow-dark.svg"
                class="arrow-nav-mobile"
                alt=""
              /></a>
              <ul class="mobile-submenu collapse">
                <li>About</li>
                <li>Team</li>
                <li>Blog</li>
                <li>Careers</li>
              </ul>
            </li>
           
            <li class="nav-menu-element">
              <a href="#" class="nav-link-mobile">Connect
              <img
                src="./images/icon-arrow-dark.svg"
                class="arrow-nav-mobile"
                alt=""
              /></a>
              <ul class="mobile-submenu collapse">
                <li>Contact</li>
                <li>Newsletter</li>
                <li>LinkedIn</li>
              </ul>
            </li>
            <nav class="nav-btns-mobile">
              <a href="#" class="login-btn-mobile">Login</a>
              <a href="#" class="btn-accent-mobile">Sign Up</a>
            </nav>
          </ul>
          <ul class="desktop-nav">
           
            <li class="nav-link">
              Product
              <img
                src="./images/icon-arrow-light.svg"
                class="arrow-nav"
                alt=""
              />
              <ul>
                <li>Overview</li>
                <li>Pricing</li>
                <li>Marketplace</li>
                <li>Features</li>
                <li>Integrations</li>
              </ul>
            </li>
          
            <li class="nav-link">
              Company
              <img
                src="./images/icon-arrow-light.svg"
                class="arrow-nav"
                alt=""
              />
              <ul>
                <li>About</li>
                <li>Team</li>
                <li>Blog</li>
                <li>Careers</li>
              </ul>
            </li>
           
            <li class="nav-link">
              Connect
              <img
                src="./images/icon-arrow-light.svg"
                class="arrow-nav"
                alt=""
              />
              <ul>
                <li>Contact</li>
                <li>Newsletter</li>
                <li>LinkedIn</li>
              </ul>
            </li>
          </ul>

CSS：

.mobile-nav {
  background-color: white;
  position: absolute;
  left: 50%;
  top: 5rem;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 2rem;
  border-radius: 0.6rem;
  box-shadow: 0px 5px 30px 4px rgba(0, 0, 0, 0.13);
  visibility: hidden;
}

.mobile-nav-open {
  visibility: visible;
}

.nav-link-mobile {
  font-family: "Ubuntu", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: hsl(208, 49%, 24%);
  cursor: pointer;
  text-decoration: none;
}
.arrow-nav-mobile {
  width: 14px;
}

.mobile-submenu {
  list-style: none;
  font-family: "Ubuntu", sans-serif;
  color: hsl(236, 11%, 49%);
  background-color: hsl(0, 0%, 93%);
  padding: 2rem 7rem;
  font-size: 1.2rem;
  margin-top: 2rem;
  border-radius: 0.6rem;
  cursor: pointer;
}

.mobile-submenu li {
  padding-bottom: 1rem;
}

.mobile-submenu-visible {
  display: block;
}

.collapse {
  display: none;
}

Answer 1

这就是我所做的，但是当我尝试您的 CSS 时，我似乎找不到切换子菜单的链接。基本上，我在 menuLink 中添加了一些 id，并且仅根据您单击的链接的 id 更改子菜单的类别。

Javascript

const navMobile = document.querySelector(".mobile-nav");
const menuLink = navMobile.childNodes;
const subMenu = document.querySelectorAll(".mobile-submenu");

menuLink.forEach((link) => {
  link.addEventListener("click", () => {
    subMenu.forEach((sublink) => {
      const dictionary = {
        'product-link': 'product-submenu',
        'company-link': 'company-submenu',
        'connect-link': 'connect-submenu'
      }
      if (dictionary[link.id] === sublink.id) {
        sublink.classList.toggle("mobile-submenu-visible");
        sublink.classList.remove("collapse");
        // sublink.classList.toggle("collapse"); // uncomment this and delete the remove("collapse") and else block if you want it to be toggle able
      } else {
        sublink.classList.toggle("mobile-submenu");
        sublink.classList.add("collapse");
      }
    });
  });
});

HTML

<ul class="mobile-nav">
  <li class="nav-menu-element" id="product-link">
    <a href="#" class="nav-link-mobile"> Product
      <img src="./images/icon-arrow-dark.svg" class="arrow-nav-mobile" alt="" /></a>
    <ul class="mobile-submenu collapse" id="product-submenu">
      <li>Overview</li>
      <li>Pricing</li>
      <li>Marketplace</li>
      <li>Features</li>
      <li>Integrations</li>
    </ul>
  </li>

  <li class="nav-menu-element" id="company-link">
    <a href="#" class="nav-link-mobile">Company
      <img src="./images/icon-arrow-dark.svg" class="arrow-nav-mobile" alt="" /></a>
    <ul class="mobile-submenu collapse" id="company-submenu">
      <li>About</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Careers</li>
    </ul>
  </li>

  <li class="nav-menu-element" id="connect-link">
    <a href="#" class="nav-link-mobile">Connect
      <img src="./images/icon-arrow-dark.svg" class="arrow-nav-mobile" alt="" /></a>
    <ul class="mobile-submenu collapse" id="connect-submenu">
      <li>Contact</li>
      <li>Newsletter</li>
      <li>LinkedIn</li>
    </ul>
  </li>
  <nav class="nav-btns-mobile">
    <a href="#" class="login-btn-mobile">Login</a>
    <a href="#" class="btn-accent-mobile">Sign Up</a>
  </nav>
</ul>
<ul class="desktop-nav">

  <li class="nav-link">
    Product
    <img src="./images/icon-arrow-light.svg" class="arrow-nav" alt="" />
    <ul>
      <li>Overview</li>
      <li>Pricing</li>
      <li>Marketplace</li>
      <li>Features</li>
      <li>Integrations</li>
    </ul>
  </li>

  <li class="nav-link">
    Company
    <img src="./images/icon-arrow-light.svg" class="arrow-nav" alt="" />
    <ul>
      <li>About</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Careers</li>
    </ul>
  </li>

  <li class="nav-link">
    Connect
    <img src="./images/icon-arrow-light.svg" class="arrow-nav" alt="" />
    <ul>
      <li>Contact</li>
      <li>Newsletter</li>
      <li>LinkedIn</li>
    </ul>
  </li>
</ul>