引導程序：使用折疊方法后，折疊無法正常工作

Question

請參考： http : //jsfiddle.net/72nfxgjs/

該代碼是從w3schools獲取的： http : //www.w3schools.com/bootstrap/tryit.asp? filename = trybs_ref_js_collapse&stacked = h

   <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 ）

Answer 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/ ”