Bootstrap面板点击展开后立即收起，如何实现正常切换？

这个问题大概率是因为折叠组件的关联属性没配置对，或者默认的锚点跳转行为干扰了切换逻辑，给你两种简单可行的解决办法：

方法1：完善触发元素的属性配置 #

Bootstrap的折叠组件在面板组（.panel-group）中使用时，需要通过data-parent绑定到面板组容器，同时阻止<a>标签的默认锚点跳转行为，避免页面滚动导致折叠状态异常：

修改后的代码如下：

<div class="panel-group" style="font-size: 14px;">
  <div class="panel panel-default">
    <div class="panel-heading" style="padding-bottom: 0;">
      <center>
        <a href="#collapse2" data-toggle="collapse" data-parent=".panel-group" onclick="return false;">显示数据假设</a>
      </center>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">年度房产增值率 - 7%</li>
        <li class="list-group-item">房产租金收益率 - 8%</li>
        <li class="list-group-item">房产初始折扣 - 20%</li>
        <li class="list-group-item">房贷首付比例 - 25%&...</li>
      </ul>
    </div>
  </div>
</div>

方法2：用按钮替代链接作为触发元素 #

<a>标签的默认跳转行为容易出问题，换成按钮就没这个烦恼了，按钮本身没有跳转逻辑，更适合做折叠触发器：

修改后的代码如下：

<div class="panel-group" style="font-size: 14px;">
  <div class="panel panel-default">
    <div class="panel-heading" style="padding-bottom: 0;">
      <center>
        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapse2" data-parent=".panel-group">显示数据假设</button>
      </center>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">年度房产增值率 - 7%</li>
        <li class="list-group-item">房产租金收益率 - 8%</li>
        <li class="list-group-item">房产初始折扣 - 20%</li>
        <li class="list-group-item">房贷首付比例 - 25%&...</li>
      </ul>
    </div>
  </div>
</div>

额外注意点 #

• 一定要确保你已经正确引入了jQuery（Bootstrap的JS组件必须依赖它），引入顺序是：先加载jQuery，再加载Bootstrap的JS文件。
• 从你的代码风格看应该是用的Bootstrap 3版本，如果是Bootstrap 4及以上，面板类已经被accordion相关组件替代，但上面的方法对3版本完全适用。

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