Collapsible需两次点击开关的问题排查及修复方法

问题根源 #

你的代码核心问题有两个：

1. 重复绑定点击事件：每次点击按钮调用toggle函数时，都会给所有.collapsible按钮重新添加一次点击事件监听。第一次点击后，按钮上绑定了1个额外的监听；第二次点击时又多绑定1个，导致点击一次触发多次状态切换，出现“点两次才生效”的混乱。
2. 文本切换与内容展开逻辑分离：你把按钮文本切换放在onclick属性的toggle函数里，而内容展开逻辑又放在动态绑定的监听里，两者没有同步执行，导致状态错位。

修复方案 #

把所有逻辑合并到一个处理函数里，并且只初始化绑定一次事件，不要每次点击都重复绑定。

修复后的完整代码

<button class="collapsible">Show</button>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel felis eu purus interdum egestas. Aliquam pharetra accumsan pellentesque. Mauris tristique mattis venenatis. Fusce lobortis arcu sit amet velit fermentum, vitae egestas ipsum auctor. Etiam interdum malesuada risus at dapibus. Nam sem urna, ultricies nec metus et, venenatis tincidunt felis. Vestibulum scelerisque orci sed libero ultricies consequat. Vivamus eget tristique urna.
</div>

<style>
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<script>
// 页面加载完成后，一次性绑定所有按钮的点击事件
document.addEventListener('DOMContentLoaded', function() {
  const colls = document.getElementsByClassName("collapsible");
  for (let i = 0; i < colls.length; i++) {
    colls[i].addEventListener("click", function() {
      // 切换按钮文本
      this.innerText = this.innerText === 'Show' ? 'Hide' : 'Show';
      // 切换active类（用于样式控制，可根据需求保留）
      this.classList.toggle("active");
      // 控制内容展开/收起
      const content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }
});
</script>

关键改进点

• 去掉了按钮上的onclick="toggle(this)"属性，避免重复触发绑定逻辑。
• 用DOMContentLoaded确保页面元素加载完成后再绑定事件，只绑定一次，不会重复叠加。
• 将文本切换、类名切换、内容高度控制合并到同一个点击处理函数里，保证状态完全同步。

简化版（单个按钮场景）

如果页面只有这一个折叠按钮，还可以更简洁：

<button class="collapsible">Show</button>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel felis eu purus interdum egestas. Aliquam pharetra accumsan pellentesque. Mauris tristique mattis venenatis. Fusce lobortis arcu sit amet velit fermentum, vitae egestas ipsum auctor. Etiam interdum malesuada risus at dapibus. Nam sem urna, ultricies nec metus et, venenatis tincidunt felis. Vestibulum scelerisque orci sed libero ultricies consequat. Vivamus eget tristique urna.
</div>

<style>
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<script>
const btn = document.querySelector('.collapsible');
btn.addEventListener('click', function() {
  this.innerText = this.innerText === 'Show' ? 'Hide' : 'Show';
  this.classList.toggle('active');
  const content = this.nextElementSibling;
  content.style.maxHeight = content.style.maxHeight ? null : content.scrollHeight + 'px';
});
</script>

这样修改后，点击一次按钮就能同步完成文本切换和内容展开/收起，完全符合预期。

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