【发布时间】：2021-12-24 20:18:19
【问题描述】：
我使用纯 JS 创建了一个多级基本导航菜单，并试图找到一个逻辑来在打开其他子菜单时折叠子菜单。我使用 foreach 循环所有具有子菜单的菜单。但是不知道如何在单击菜单时检测其他菜单。谁可以帮我这个事。提前致谢！
/* toggle click function for submenus */
slideToggle=(el)=> {
let cs = window.getComputedStyle(el).display;
if(cs==="none") {
el.style.display="block";
}
else {
el.style.display="none";
}
}
/* detecting menus which has submenus */
submenuDetect=()=> {
let li = document.querySelectorAll(".main-navigation-content > ul li");
/* adding a class "has-submenu" for menu which has sublevel menu */
li.forEach((item)=>{
let ul = item.querySelector("ul");
if(ul){
item.classList.add("has-submenu");
ul.classList.add("submenu-content");
/* adding icon */
let iconElement = document.createElement("span");
iconElement.setAttribute("class","down-arrow-icon submenu-trigger");
item.querySelector("a").insertAdjacentElement("afterend", iconElement);
}
});
}
/* assign toggle function to menu which has submenus */
submenuToggle=()=>{
/* find all menu which has submenus and making toggle */
let submenuTrigger = document.querySelectorAll(".has-submenu > a");
submenuTrigger.forEach((item)=>{
item.addEventListener("click",(e)=>{
e.preventDefault();
let submenuContent = e.target.parentElement.querySelector('.submenu-content');
slideToggle(submenuContent);
})
});
}
/* calling submenu detect function and slidetoggle function */
submenuDetect();
submenuToggle();body {font-family: Arial, Helvetica, sans-serif;;}
.main-navigation-content ul {list-style: none;margin:0;padding:0;transition:all 0.35s ease;}
.main-navigation-content ul li {border:1px solid #cdcdcd;margin-bottom: -1px;/* margin-left: -1px; *//* margin-right: -1px; */background: #f5f5f5;/* margin: -1px; *//* height: 2.5rem; */}
.main-navigation-content ul li a {text-decoration: none;line-height: 2.5rem;padding-left: .5rem;color: #555;display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 1;padding-right: .5rem;transition:all 0.35s ease;/* width: 100%; */height: 2.5rem;flex-grow: 1;}
.main-navigation-content ul li ul li {margin-left: -1px;margin-right: -1px;}
.down-arrow-icon {width: 2.5rem;display: flex;height: 2.5rem;align-items: center;justify-content: center;position: absolute;z-index: 0;right: 0;top: 0;cursor: pointer;margin-right: 0;line-height: 2.5rem;/* background: red; */}
.down-arrow-icon:after { content:""; width: .03rem; height: .03rem; background-color: transparent; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); position: absolute; top: 35%;}
.navigation-master-wrapper {border: 1px solid #cdcdcd; width: auto;background: #f9f9f9;height: 500px;overflow-y: auto;}
.main-navigation {position: relative; height: auto;}
.main-navigation-trigger {margin-left: auto;position: relative;cursor: pointer;left: auto;right: .25rem;display: inline-block;padding: 0;font-size: 12px;top: 0;z-index: 100;margin-bottom: .5rem;display: none;}
.main-navigation-content { display:none;}
.main-navigation-content > ul { list-style: none;padding: 0;margin: 0;}
.main-navigation-content > ul li { position: relative;}
.main-navigation-content .submenu-content {display: none;}
@media only screen and (min-width:800px) {
.main-navigation-content > ul li .submenu-content li a {padding-left:2rem;}
.main-navigation-content > ul li .submenu-content li ul li a {padding-left:3rem}
.main-navigation-content > ul li .submenu-content {margin-top:1px;background: #fff;}
.main-navigation-content > ul li .submenu-content li ul {margin-top:0;}
.main-navigation-content {display:block !important;width: 20rem;}
.main-navigation-content > ul li > ul {top:100%;}
.main-navigation-content > ul li {position: initial;}
.main-navigation-content > ul > li {position: relative;}
.main-navigation-content > ul > li a {/* padding-left: 1rem; *//* padding-right: 1rem; */}
.main-navigation-content > ul li > ul li {position:relative;background: #fff;}
.main-navigation-content > ul li ul {transition:all 0.35s ease;}
}<div class="main-navigation">
<div class="main-navigation-trigger">
<div class="main-navigation-trigger-inner"></div>
</div>
<div class="main-navigation-content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">History and Foundation</a></li>
<li><a href="">Company Overview</a></li>
<li><a href="">Working Strategy</a>
<ul>
<li><a href="">Employer Profile</a></li>
<li><a href="">Manpower Allocation</a></li>
<li><a href="">Marketing Strategy</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Services</a>
<ul>
<li><a href="">Graphic Designing</a></li>
<li><a href="">Web Designing</a></li>
<li><a href="">App Development</a>
<ul>
<li><a href="">Android</a></li>
<li><a href="">IOS</a></li>
<li><a href="">Hybrid</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>【问题讨论】：
-
@MisterJojo，我现在尽可能地修改和减少了代码。
标签： javascript html navigation collapse