如何解决简单的手风琴不起作用,因为处理程序一次触发 2 次
我正在尝试制作一个非常简单的手风琴。
index.html
<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>
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)
})
第一个手风琴工作没有任何问题,但是当单击一个时,“切换”功能上的第二个会立即触发两次,没有任何区别。有什么线索吗?
解决方法
首先,您不需要为 classList 编写切换函数,因为它已经存在。
其次,您的 KING_MOVES[31]
节点需要有一个结束 <div class="body">
标签。
</div>
let accordians = document.querySelectorAll(".accordian")
accordians.forEach((obj) => {
obj.children[1].classList.add("hidden")
obj.addEventListener('click',e => {
e.currentTarget.children[1].classList.toggle("hidden")
},false)
})
.hidden { display: none; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。