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

如何解决单击父菜单时仅打开一个子菜单

我正在尝试构建一个带有子菜单的菜单。我使用 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.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;
}