Javascript 简单手风琴不';因为处理程序一次触发2次,所以无法工作
我正在尝试制作一个非常简单的手风琴 index.htmlJavascript 简单手风琴不';因为处理程序一次触发2次,所以无法工作,javascript,html,frontend,ecmascript-2016,Javascript,Html,Frontend,Ecmascript 2016,我正在尝试制作一个非常简单的手风琴 index.html <div class="container"> <div class="accordian"> <div class="title">Title</div> <div class="body">Lorem ipsum
<div class="container">
<div class="accordian">
<div class="title">Title</div>
<div class="body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti mollitia maxime ab. Possimus est optio
</div>
<div class="accordian">
<div class="title">Title</div>
<div class="body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti mollitia maxime ab. Possimus est optio
</div>
</div>
标题
Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。莫利特腐败菌
标题
Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。莫利特腐败菌
main.js
let accordians = document.querySelectorAll(".accordian")
const toggle = e => {
if (e.target.nextElementSibling.classList.length < 2) {
e.target.nextElementSibling.classList.add("hidden")
console.log("1:",e.target.nextElementSibling.classList)
}
else {
e.target.nextElementSibling.classList.remove("hidden")
console.log("2:",e.target.nextElementSibling.classList)
}
}
accordians.forEach((obj) => {
obj.children[1].classList.add("hidden")
obj.addEventListener('click', e => { toggle(e) }, false)
})
let accordians=document.queryselectoral(“.accordian”)
常数切换=e=>{
if(e.target.nextElementSibling.classList.length<2){
e、 target.nextElementSibling.classList.add(“隐藏”)
log(“1:,e.target.nextElementSibling.classList)
}
否则{
e、 target.nextElementSibling.classList.remove(“隐藏”)
log(“2:,e.target.nextElementSibling.classList)
}
}
手风琴手。forEach((obj)=>{
obj.children[1].classList.add(“隐藏”)
addEventListener('click',e=>{toggle(e)},false)
})
第一个手风琴没有任何问题,但当点击一次时,第二个“切换”功能立即被触发两次,没有任何区别。有什么线索吗?首先,不需要为类列表编写切换函数,因为它已经存在 其次,您的
节点需要有一个关闭标记
let accordians=document.queryselectoral(“.accordian”)
手风琴手。forEach((obj)=>{
obj.children[1].classList.add(“隐藏”)
obj.addEventListener('click',e=>{
e、 currentTarget.children[1].classList.toggle(“隐藏”)
},错)
})
.hidden{display:none;}
标题
Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。莫利特腐败菌
标题
Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。莫利特腐败菌