Accordion组件首次加载需双击才生效，求问题原因排查

核心原因 #

你遇到的双击触发问题，本质是**element.style.display仅读取元素的内联样式**——而你是在SCSS（外部样式表）中设置的display: none。首次点击时，this.nextElementSibling.style.display的值是空字符串（无内联样式），不满足判断条件里的"none"，代码会执行else分支，将其设为display: none（实际原本就是隐藏状态）。第二次点击时，内联样式已被设置为none，才会触发切换为block的逻辑。

解决方案 #

推荐两种更可靠的修复方式：

方案1：通过计算样式判断状态

使用getComputedStyle获取元素实际生效的样式，无论样式来自外部表还是内联：

let accordionHeaders = document.getElementsByClassName("accordions__header");

for(let header of accordionHeaders) {
    header.addEventListener("click", function() {
        const panel = this.nextElementSibling;
        const computedStyle = window.getComputedStyle(panel);
        if (computedStyle.display === "none") {
            panel.style.display = "block";
        } else {
            panel.style.display = "none";
        }
    });
}

方案2：用CSS类控制（更优雅易维护）

将样式逻辑完全交给CSS，JS仅负责切换类名，符合语义化开发规范：

1. 修改SCSS，新增控制显示的类：

.accordions__panel {
    display: none;
}
.accordions__panel.active {
    display: block;
}

2. 调整JS代码：

let accordionHeaders = document.getElementsByClassName("accordions__header");

for(let header of accordionHeaders) {
    header.addEventListener("click", function() {
        const panel = this.nextElementSibling;
        panel.classList.toggle("active");
    });
}

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