当单击子菜单父箭头元素时，我正在try 关闭所有子菜单子菜单，并将箭头旋转回来.我写的声明不起作用.它应该只切换与事件目标匹配的子菜单子菜单.请帮帮忙. https://jsfiddle.net/d3auwqvb/个
<!DOCTYPE html>
<head>
<title>webpage</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<html lang="en" dir="ltr" />
<link rel="stylesheet" href="css/style.css" />
<link rel='stylesheet' href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<div class="index-list">
<ul class="index-itself">
<li class="indexitem1 indexitem"><a href="#">indexitem1</a><i class="fas fa-angle-down indexitem1indexarrow arrow"></i>
<ul class="indexitem1submenu index-sub-menu hidden">
<li class="indexitem2 indexitem"><a href="#">indexitem2</a><i class="fas fa-angle-down indexitem2indexarrow arrow"></i>
<ul class="indexitem2submenu index-sub-menu-sub-menu hidden">
<li><a href="#">lorem uipson</a></li>
</ul>
</li>
</ul>
</li>
<li class="indexitem3 indexitem"><a href="#">indexitem3</a><i class="fas fa-angle-down indexitem1indexarrow arrow"></i>
<ul class="indexitem3submenu index-sub-menu hidden">
<li class="indexitem4 indexitem"><a href="#">indexitem4</a><i class="fas fa-angle-down indexitem2indexarrow arrow"></i>
<ul class="indexitem4submenu index-sub-menu-sub-menu hidden">
<li><a href="#">lorem uipson</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
.index-list {
position: static;
width: calc(100% - 50%);
word-wrap: break-word;
padding: 10px 20px;
text-align: left;
border: 3px solid #444;
margin: 0px 105px 100px 100px;
box-shadow: #333;
background-color: #ffffff;
font-family: poppins;
font-size: 17px;
}
.index-list li {
list-style: none;
}
.index-list li a {
text-decoration: none;
color: #000;
}
.index-list li i {
color: #000;
cursor: pointer;
font-size: 20px;
}
.index-list .index-itself .index-sub-menu li a {
position: relative;
padding-left: 10px;
}
.index-list li i:hover{
font-size: 22px;
}
.hidden {
display: none;
}
.rotatearrow {
transform: rotate(180deg);
}
// Index //
const indexList = document.querySelector('.index-list');
const indexSubmenus = document.querySelectorAll('.index-sub-menu');
const indexSubmenusSubmenus = document.querySelectorAll('.index-sub-menu-sub-menu');
// close all submenu submenus and arrows on submenu arrow click //
indexSubmenus.forEach(submenu =>{
indexSubmenusSubmenus.forEach(submenuSubmenu =>{
submenu.parentElement.children[1].addEventListener('click',(Event)=>{
if (submenuSubmenu.parentElement.parentElement == Event.target.parentElement){
this.classList.add('hidden');
this.parentElement.children[1].classList.remove('rotatearrow')}
});
});
});
//
// open submenus and submenu submenus //
openSubmenus = (Event)=>{
for(let i=0; i < indexSubmenus.length; i++)
if(indexSubmenus[i].parentElement.children[1] == Event.target){
Event.target.parentElement.children[2].classList.toggle('hidden');
Event.target.parentElement.children[1].classList.toggle('rotatearrow');
}};
openSubmenusSubmenus = (Event)=>{
for(let i=0; i < indexSubmenusSubmenus.length; i++)
if(indexSubmenusSubmenus[i].parentElement.children[1] == Event.target){
Event.target.parentElement.children[2].classList.toggle('hidden');
Event.target.parentElement.children[1].classList.toggle('rotatearrow');
}};
indexList.addEventListener('click',openSubmenus);
indexList.addEventListener('click',openSubmenusSubmenus);
//
我try 了这个Java脚本，但它不起作用:
indexSubmenus.forEach(submenu =>{
indexSubmenusSubmenus.forEach(submenuSubmenu =>{
submenu.parentElement.children[1].addEventListener('click',(Event)=>{
if (submenuSubmenu.parentElement.parentElement === Event.target.parentElement){
this.classList.add('hidden');
this.parentElement.children[1].classList.remove('rotatearrow')}
});
});
});