簡單的手風琴不起作用，因為處理程序一次觸發 2 次

Question

我正在嘗試創建一個非常簡單的手風琴。

索引.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)
})

第一個手風琴沒有任何問題，但是當在“切換”上單擊第二個時，function 立即被觸發兩次，沒有任何區別。 有什么線索嗎？

Answer 1

首先，您不需要為 classList 編寫切換 function，因為它已經存在。

其次，您的<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; }

 <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> <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> </div>