Bootstrap折叠组件初始展开异常及首次点击失效问题求助

我来帮你搞定这个Bootstrap折叠面板的问题！先给你拆解两个问题的解决方案：

问题1：设置初始展开并避免首次点击失效 #

你遇到的核心问题大概率是Bootstrap版本不兼容导致的：

• Bootstrap 3中，控制折叠面板初始展开的类是collapse in
• Bootstrap 4及以上版本，这个类已经改成了collapse show

如果你的项目用的是Bootstrap 4+，还在用in的话，就会出现初始隐藏、点击逻辑混乱的情况。给你修正后的代码：

<!-- Bootstrap 4+ 版本的正确写法 -->
<button data-toggle="collapse" data-target="#rowAngleOutputDiv0" aria-expanded="true"></button>
<div id="rowAngleOutputDiv0" class="collapse show">
  <div class="row">
    <div id="angleOutputDiv0">
      <canvas id="angleOutput0"></canvas>
    </div>
    <div>
      <div id="dygraphOutC0"></div>
      <div id="dygraphOutC1"></div>
      <div id="dygraphOutC2"></div>
    </div>
  </div>
</div>

另外还要注意两个细节：

• 给按钮加上aria-expanded="true"属性，让它的状态和折叠面板初始展开的状态保持同步，避免点击逻辑错乱
• 确保你正确引入了Bootstrap的CSS和JS文件，Bootstrap 4+还需要引入Popper.js（完整包已包含），加载顺序要正确：先CSS，再jQuery（若依赖），最后Bootstrap JS

如果你的项目确实用的是Bootstrap 3，但还是出问题，那可以试试手动初始化折叠组件，在页面加载完成后执行这段JS：

$(document).ready(function() {
  $('#rowAngleOutputDiv0').collapse('show');
});

问题2：保留class="collapse in"时，让点击按钮后子元素显示 #

如果因为某些原因必须保留collapse in，那大概率是组件状态没有正确初始化导致的。可以用以下两种方法解决：

方法1：强制同步按钮和面板的状态 #

给按钮加上aria-expanded="true"，同时手动触发折叠组件的状态更新：

<button data-toggle="collapse" data-target="#rowAngleOutputDiv0" aria-expanded="true"></button>
<div id="rowAngleOutputDiv0" class="collapse in">
  <!-- 子元素内容 -->
</div>

然后在页面加载后执行JS：

$(document).ready(function() {
  // 强制刷新折叠组件的状态，让内部逻辑与DOM类名同步
  $('#rowAngleOutputDiv0').collapse('toggle');
  $('#rowAngleOutputDiv0').collapse('toggle');
});

方法2：用JS手动控制点击事件 #

如果上面的方法没用，可以直接给按钮绑定自定义点击事件，绕过Bootstrap的默认逻辑：

<button id="toggleBtn0"></button>
<div id="rowAngleOutputDiv0" class="collapse in">
  <!-- 子元素内容 -->
</div>

$(document).ready(function() {
  $('#toggleBtn0').click(function() {
    $('#rowAngleOutputDiv0').toggleClass('in');
  });
});

这样就能直接控制面板的显示和隐藏，不会出现状态错乱的问题。

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