在Jekflix模板中添加Accordion手风琴后按钮无法点击如何解决

数据老陈

2026-9-27

问题原因及修复方案

脚本执行时机错误
你当前的JS代码如果在DOM元素渲染完成前就运行，document.getElementsByClassName("accordion")会获取到空的元素集合，后续的点击事件绑定不会执行，就会出现样式正常、点击无响应的问题。
CSS语法错误
你写的button.accordion:hover,末尾多了多余的逗号，会导致整条hover样式规则失效，虽然不影响点击功能，但hover状态下样式不会生效。

修正后的代码

JS代码（增加DOM加载完成监听）

document.addEventListener('DOMContentLoaded', function() {
  var accordions = document.getElementsByClassName("accordion");
  for (var i = 0; i < accordions.length; i++) {
    accordions[i].onclick = function() {
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
      // 可选：切换激活类，方便自定义展开状态的按钮样式
      this.classList.toggle('active');
    }
  }
});

CSS代码（移除多余逗号，增加过渡效果）

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

button.accordion:hover {
  background-color: #ddd;
}

button.accordion.active {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}