Accordion组件异常联动求助：相邻面板误触发显示/消失

问题描述 #

使用Accordion组件时出现异常：点击打开一个面板，相邻面板会同步展开；关闭该面板时，相邻面板会意外消失。期望点击仅触发当前被点击的面板。

问题原因 #

1. 事件绑定目标错误：原代码给accordion-card绑定点击事件，且错误地将当前卡片的下一个兄弟元素当作面板进行操作，导致相邻卡片被误触发。
2. 逻辑冲突：JS中手动操作display属性，和CSS通过active类控制height/padding的显示逻辑冲突，引发界面异常。

解决方案 #

修正JavaScript逻辑，将事件绑定到实际点击的标题元素，仅操作当前卡片内部的面板：

修正后的JavaScript代码 #

var headers = document.getElementsByClassName("accordion-header");
for (var i = 0; i < headers.length; i++) {
  headers[i].addEventListener("click", function() {
    // 获取当前点击标题所属的卡片容器
    var card = this.parentElement;
    // 仅切换当前卡片的active类，控制面板显示/隐藏
    card.classList.toggle("active");
  });
}

说明 #

• 事件绑定到accordion-header（用户实际点击的标题区域），更符合交互逻辑。
• 通过parentElement定位到当前卡片，切换active类时只会影响当前卡片的面板，不会波及相邻元素。
• 移除了JS中对display属性的操作，完全依赖CSS的active类控制面板的显示/隐藏，避免逻辑冲突。

原CSS和HTML代码无需修改，保持原样即可。

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