Bootstrap：使用折叠方法后折叠不起作用

【问题标题】：Bootstrap: Collapse does not work right after using Collapse MethodsBootstrap：使用折叠方法后折叠不起作用
【发布时间】：2018-09-26 15:38:22
【问题描述】：

   <script type="text/javascript">
   $("#collapse1").collapse('hide');
   $("#collapse2").collapse('show');
   </script>

将上述代码添加到页面后，手动隐藏第一个面板并显示下一个，前两个面板在显示时停止隐藏其他面板。

如何解决？

更新：默认情况下，我不希望第一个面板被隐藏而第二个面板可见，我想在按钮单击（或任何其他 javascript 代码）时执行该操作。同样通过onclick添加和删除类删除动画不会导致图标更改事件（http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h）

【问题讨论】：

【解决方案1】：

添加自己的脚本有点扰乱引导手风琴的行为方式。要实现上述结果，您不需要脚本，您可以使用类.collapse：隐藏内容和.collapse.in：显示内容。

因此，在您的 HTML 中进行以下更改：

 <div id="collapse1" class="panel-collapse collapse in">

到

<div id="collapse1" class="panel-collapse collapse">

和

<div id="collapse2" class="panel-collapse collapse">

到

<div id="collapse2" class="panel-collapse collapse in">

达到同样的效果。见小提琴：“http://jsfiddle.net/72nfxgjs/1/”

【讨论】：