我正在创建一个包含三个子菜单的下拉菜单。我现在的挑战是当我单击父 LI 旁边的箭头图像时能够打开每个子菜单。目前,使用我当前的脚本,它只影响第一个父 LI,打开其各自的子菜单。然而,其他两个子菜单并未成为目标。
const arrowButton = document.querySelectorAll(".menu-arrow");
const subMenu = document.querySelector(".sub-menu");
arrowButton.forEach((el) =>
el.addEventListener("click", () => {
subMenu.classList.toggle("open");
})
);
.sub-menu {
display: none;
}
.sub-menu.open {
display: flex;
flex-direction: column;
background-color: $footer-text;
width: 60vw;
margin: 0 auto;
color: $darkblue-headingtext;
border-radius: 5px;
}
<ul class="nav__links">
<li class="parent">
Product
<img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
<ul class="sub-menu">
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="parent">
Company
<img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
<ul class="sub-menu">
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="parent">
Connect
<img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
<ul class="sub-menu">
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
我将不胜感激任何提示!谢谢!!
答案 0 :(得分:2)
使用这一行 const subMenu = document.querySelector(".sub-menu");
,您将始终获得第一个元素,这就是为什么无论单击哪个节点都会打开第一个菜单的原因。您需要将子菜单节点 next 获取到被点击的元素:
arrowButton.forEach((el) =>
el.addEventListener("click", () => {
const subMenu = el.parentNode.querySelector(".sub-menu");
subMenu.classList.toggle("open");
})
);
答案 1 :(得分:2)
问题是您使用 querySelector
只选择第一个找到的元素。但是您可以使用通过每个事件侦听器提供的事件本身,并通过 event.target
获取点击的目标。然后你可以简单地用 nextElementSibling
选择下一个元素,但也许子菜单的位置在开发过程中会发生变化,所以最好用 .parentElement
选择该目标的父级并选择子菜单类就像你在上面对 .querySelector(".sub-menu")
所做的一样。
工作示例:
const arrowButton = document.querySelectorAll(".menu-arrow");
arrowButton.forEach((el) =>
el.addEventListener("click", (event) => {
const subMenu = event.target.parentElement.querySelector(".sub-menu");
subMenu.classList.toggle("open");
})
);
.sub-menu {
display: none;
}
.sub-menu.open {
display: flex;
flex-direction: column;
background-color: $footer-text;
width: 60vw;
margin: 0 auto;
color: $darkblue-headingtext;
border-radius: 5px;
}
<ul class="nav__links">
<li class="parent">
Product
<img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
<ul class="sub-menu">
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="parent">
Company
<img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
<ul class="sub-menu">
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="parent">
Connect
<img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
<ul class="sub-menu">
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
答案 2 :(得分:1)
const arrowButton = document.querySelectorAll(".menu-arrow");
arrowButton.forEach((el) =>
el.addEventListener("click", (e) => {
e.target.nextElementSibling.classList.toggle("open");
})
);