forEach循环中classList返回undefined，点击添加active类失效求助

你的问题出在事件监听的回调参数传递错误：

当你用panel.addEventListener('click', expand)绑定事件时，浏览器会自动把Event对象作为第一个参数传给expand函数，而不是你以为的panel元素。所以expand里的panel其实是事件对象，自然没有classList属性，导致报错。

修复方法有两种： #

方法1：用箭头函数包裹，手动传递panel元素

修改forEach里的事件绑定代码：

panelInactive.forEach((panel) => {
  panel.addEventListener('click', collaps);
  // 用箭头函数包裹，把当前panel传给expand
  panel.addEventListener('click', () => expand(panel));
});

方法2：修改expand函数，通过事件对象获取目标元素

这种方法更可靠，尤其是当面板内部有子元素时，currentTarget能确保获取到绑定事件的面板本身：

// 修改expand函数
const expand = (event) => {
  // currentTarget是绑定事件的元素，也就是当前点击的panel
  const panel = event.currentTarget;
  console.log(panel);
  console.log(panel.classList);
  panel.classList.add('active');
};

// 事件绑定不用改，直接传expand即可
panelInactive.forEach((panel) => {
  panel.addEventListener('click', collaps);
  panel.addEventListener('click', expand);
});

额外提示： #

你一开始用querySelectorAll获取的panelInactive是静态NodeList，当你给某个面板添加active类后，它不会自动从panelInactive中移除。如果后续需要处理状态变化后的面板，建议每次点击时重新获取活跃/非活跃面板，或者用事件委托的方式更高效。

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