Cargo预发布站点JS折叠面板正常，正式站点失效求助

你的折叠面板代码在预发布站正常、正式站失效，大概率是以下几种常见问题，对应解决方案如下：

1. 脚本执行时机过早 #

正式站加载的资源通常更多（比如图片、第三方插件），导致DOM还没完全渲染完成，你的脚本就已经运行了——这时getElementsByClassName("accordion")获取不到任何元素，自然绑定不了点击事件。预发布站资源少、DOM加载快，所以没触发这个问题。

修复代码：把脚本放在</body>标签之前，或者用DOMContentLoaded事件包裹代码，确保DOM渲染完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
});

2. 依赖DOM结构的逻辑不可靠 #

你的代码用nextElementSibling获取折叠面板，如果正式站的DOM结构和预发布站不一致（比如.accordion元素后面多了隐藏节点、换行被解析成文本节点等），就会导致panel不是目标面板，自然无法切换显示。

修复方案：
给折叠面板添加专属类名（比如accordion-panel），用更精准的方式获取：

// 替换原代码中获取panel的行
var panel = this.nextElementSibling;
// 改成
var panel = this.querySelector('.accordion-panel');
// 或者加个结构判断，避免无效操作
var panel = this.nextElementSibling;
if (!panel || !panel.classList.contains('accordion-panel')) return;

3. 内联样式与CSS类冲突 #

你的代码只检查元素的内联style的display值，如果正式站中折叠面板的初始隐藏是通过CSS类（比如.accordion-panel { display: none; }）设置的，那么panel.style.display一开始是空字符串，第一次点击能正常设置为block，但后续切换时逻辑会出错。

更可靠的修复：用CSS类控制显示隐藏，完全脱离内联样式：

1. 添加CSS样式：

.accordion-panel {
  display: none;
}
.accordion-panel.open {
  display: block;
}

2. 修改JS代码：

document.addEventListener('DOMContentLoaded', function() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      panel.classList.toggle("open");
    });
  }
});

4. 存在脚本冲突或报错 #

打开正式站的浏览器开发者工具（F12），切换到Console面板查看是否有红色错误提示。比如其他脚本报错中断了你的代码执行、变量被覆盖等，都会导致折叠功能失效，根据报错信息针对性修复即可。

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