如何优化我为制作手风琴而编写的代码？

Question

dear friends, I am just learning javascript and I wrote a code to make an accordion, but I feel that there are much better ways to implement this accordion, I would be grateful if you could guide me with the methods Get to know better. This is the code I wrote:

const inputs = document.querySelectorAll('input');
const contents = document.querySelectorAll('.content')

let activeTarget;
for (let i = 0; i < contents.length; i++) {
    inputs[i].addEventListener("click",
        (event) => {
            if (contents[i].classList.value === "content open") {
                contents[i].classList.remove('open')
            }
            else if (activeTarget !== undefined) {
                activeTarget.classList.remove('open')
                contents[i].classList.add('open')
                activeTarget = contents[i]
            } else {
                contents[i].classList.add('open')
                activeTarget = contents[i];
            }
        }
        )
}

Answer 1

Rather than IF statements, you can just preemptively remove the 'open' class from all, then reapply it for the activeTarget. I did add an IF statement to allow the user to close an accordion item by clicking on it again.

const inputs = document.querySelectorAll('input');
const contents = document.querySelectorAll('.content')
let activeTarget;

contents.forEach(item => item.addEventListener("click", e => {
  contents.forEach(i => i.classList.remove('open'));
  if (activeTarget == e.target) {
     activeTarget = null;
     return;
  }
  activeTarget = e.target;
  activeTarget.classList.add('open');
}))

Answer 2

Reduce the else if and else into just one else , then check if activeTarget is undefined in the new else . This reduces duplicated code.

Then let's change the condition in the if to use contains instead. This will be safer, because you don't check if the class list is exactly content open . Instead you only test if the element has the open class.

if (contents[i].classList.contains("open")) {
    contents[i].classList.remove('open')
} else {
    if (activeTarget !== undefined)
        activeTarget.classList.remove('open')
    contents[i].classList.add('open')
    activeTarget = contents[i]
}

Answer 3

My bet would be:

// one click listener for the document rather than for every element
document.addEventListener((e) => {
  // if the user clicks on inputs
  if (e.currentTarget.tagName === 'input') {
    // input & accordion items are bound with the data-id attribute,
    // make sure elements have data-id attributes with the right values
    const current = document.querySelector(`.content[data-id="${e.currentTarget.dataset.id}"]`)
    // remove "open" class for every accordion item
    document.querySelectorAll('.content').forEach((item) => {
      item.classList.remove('open');
    });
    // toggle "open" class on the accordion item
    current.classList.toggle('open');
  }
});

Feel free to ask questions about the code in the comments. Thanks.