按W3S教程实现的HTML页面accordion手风琴功能不生效如何解决

DevOps 小满

2026-9-28

问题排查与解决

你当前用的是纯原生JS实现手风琴，完全不需要引入jQuery，jquery-3.6.0.min.js和该实现无关联，无需额外依赖其他第三方库。常见失效原因如下：

缺失配套CSS样式
该实现的核心交互依赖CSS配置，必须添加如下样式才能正常运行：

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

其中.panel的max-height: 0和overflow: hidden是核心配置，缺失后JS修改max-height不会有任何折叠展开效果。

JS执行时机错误
如果你的JS代码是在<head>中引入，或是放在手风琴DOM元素之前加载，执行document.getElementsByClassName("accordion")时页面还未渲染对应按钮元素，拿到的是空集合，事件绑定不会生效。
可以将所有JS代码包裹在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.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
})

也可以直接把JS引入代码放到</body>标签之前，保证DOM加载完成后再执行JS。