JS手风琴代码中将传统for循环替换为forEach的实现问题

前置说明 #

• document.getElementsByClassName 返回的是HTMLCollection类数组对象，本身没有内置forEach方法，需要先转换为普通数组才能调用遍历API
• 原代码中判断非当前激活项的逻辑存在隐患：通过classList对比无法准确区分元素（不同元素可能存在完全相同的类名），建议直接对比元素引用本身

完整改写后代码 #

// 先将类数组转为普通数组，方便调用forEach
const acc = Array.from(document.getElementsByClassName('footer-accordion'));

// 外层循环直接用forEach绑定事件
acc.forEach(item => {
  item.addEventListener('click', function() {
    this.classList.toggle('active');
    const panel = this.nextElementSibling;
    
    if (panel.style.display === 'block') {
      panel.style.display = 'none';
    } else {
      panel.style.display = 'block';
      // 内层循环替换为forEach，遍历所有手风琴项
      acc.forEach(otherItem => {
        // 直接对比元素引用，判断是否为当前点击的项
        if (otherItem !== this) {
          otherItem.classList.remove('active');
          otherItem.nextElementSibling.style.display = 'none';
        }
      });
      // 滚动逻辑移出循环，避免多次执行
      panel.scrollIntoView({
        block: 'end',
        behavior: 'smooth'
      });
    }
  });
});

优化点说明 #

• 原代码中scrollIntoView逻辑放在内层循环中，手风琴有多少项就会执行多少次，移出循环后仅执行1次，减少不必要的性能消耗
• 元素对比逻辑修正后，不会出现类名重复导致的判断错误问题

内容的提问来源于stack exchange，提问作者Mikey