使用纯JS+nextElementSibling实现多层手风琴多实例失效求助

你遇到的问题很典型——querySelectorAll 和 getElementsByClassName 返回的是一个元素集合（NodeList/HTMLCollection），而不是单个DOM元素，集合本身并没有 addEventListener 方法，所以直接调用会报错。确实需要用遍历的方式，给每个手风琴实例单独绑定点击事件，forEach 是最简洁的实现方式。

问题根源拆解 #

你的单实例代码能正常运行，是因为 querySelector 返回的是单个DOM元素，直接调用 addEventListener 完全没问题。但多场景下，querySelectorAll 拿到的是包含多个 .mainAccordion 的类数组对象，必须逐个处理里面的每一个元素，才能给每个手风琴绑定独立的交互逻辑。

修正后的多实例JS代码 #

// 获取所有手风琴容器
const accordions = document.querySelectorAll(".mainAccordion");

// 遍历每个容器，为其绑定点击事件
accordions.forEach(accordion => {
  accordion.addEventListener("click", function(e) {
    const targetSibling = e.target.nextElementSibling;
    if (targetSibling.style.maxHeight) {
      targetSibling.style.maxHeight = null;
    } else {
      targetSibling.style.maxHeight = targetSibling.scrollHeight + "px";
    }
  });
});

补充：兼容旧浏览器的替代写法 #

如果需要兼容不支持 NodeList.prototype.forEach 的旧浏览器（比如IE11），可以用传统的 for 循环实现：

const accordions = document.querySelectorAll(".mainAccordion");
for (let i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function(e) {
    const targetSibling = e.target.nextElementSibling;
    if (targetSibling.style.maxHeight) {
      targetSibling.style.maxHeight = null;
    } else {
      targetSibling.style.maxHeight = targetSibling.scrollHeight + "px";
    }
  });
}

为什么这样能正常工作？ #

• 我们遍历每个 .mainAccordion 容器，给每个容器单独绑定点击事件，确保每个手风琴实例的交互逻辑独立，不会互相干扰。
• 完全保留了你原本的核心逻辑：通过 e.target 定位点击的标题元素，再用 nextElementSibling 控制对应内容区域的展开/收起，完美符合你练习基础DOM操作的需求。

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