单击父级时仅打开一个子菜单
Posted
技术标签:
【中文标题】单击父级时仅打开一个子菜单【英文标题】：Open only one submenu when clicked on the parent 【发布时间】：2021-08-12 02:25:30 【问题描述】：我正在尝试构建带有子菜单的菜单。我使用 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");
);
);
);
<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"
/></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"
/></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"
/></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"
/>
<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"
/>
<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"
/>
<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;
【问题讨论】：
【参考方案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" /></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" /></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" /></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" />
<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" />
<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" />
<ul>
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
【讨论】：
谢谢！尽管我正在寻找一种无需硬编码即可实现这一目标的方法。例如，如果我想向菜单添加一个新链接，我不必向它添加一个 ID，然后将它添加到 JS 文件中。无论如何，您可以完成这项工作吗？以上是关于单击父级时仅打开一个子菜单的主要内容，如果未能解决你的问题，请参考以下文章
mmenu: 一次只展开一个子菜单 (slidingSubmenus: false)