表单容器内的手风琴(Accordion)组件点击异常：仅触发按钮效果且面板内容仅闪显

我来帮你揪出这个问题的根源，以及快速修复的办法～

问题原因 #

你把手风琴的按钮放在<form>标签内部了，但HTML里的<button>元素默认类型是submit！点击它的时候，浏览器会自动触发表单的提交行为，导致页面刷新——这就解释了为什么手风琴面板刚展开就瞬间消失，看起来像是“闪了一下”。而表单外面的手风琴能正常工作，就是因为它不在表单范围内，不会触发提交刷新。

修复方案 #

这里有两种简单有效的解决方式，选你顺手的来：

方法1：给手风琴按钮明确指定type="button"（推荐）

直接修改HTML里的手风琴按钮，给它加上type="button"属性，告诉浏览器这只是个普通按钮，不是提交按钮：

<!-- 原代码 -->
<button class="accordion ">Section 1</button>
<!-- 修改后 -->
<button type="button" class="accordion ">Section 1</button>

所有表单内的手风琴按钮都要这么改，这样点击时只会执行你写的手风琴展开/收起逻辑，不会触发表单提交。

方法2：在JS事件中阻止默认提交行为

如果不想动HTML，也可以在你的JavaScript点击事件里，加上阻止默认行为的代码：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function(event) {
    // 阻止按钮的默认表单提交行为
    event.preventDefault();
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

小提示 #

更推荐第一种方法，因为直接通过HTML属性明确按钮类型，更符合规范，也能避免后续其他潜在的默认行为冲突。

内容来源于stack exchange