Bootstrap關閉手風琴菜單

Question

我是新手引導，並使用引導手風琴創建了導航菜單。當我點擊任何鏈接時，它將打開手風琴，但不會關閉打開的手風琴。我怎樣才能做到這一點？

我創建了一個小提琴：http://jsfiddle.net/4qk86/

我的手風琴代碼：

<li> 
     <div class="accordion-heading "> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> 
             <span class="item-icon fontello-icon-monitor"></span> 
             <i class="chevron fontello-icon-right-open-3"></i> Dashboards 
            </a> 
     </div> 
     <ul class="accordion-content nav nav-list collapse in" id="accDash"> 
      <li class="active"> <a href="dashboard-one.html"> 
              <i class="fontello-icon-right-dir"></i> 
              <span class="hidden-tablet">Dashboard</span> Demo 1 
             </a> 
      </li> 
      <li> <a href="dashboard-two.html"> 
              <i class="fontello-icon-right-dir"></i> 
              <span class="hidden-tablet">Dashboard</span> Demo 2 
             </a> 
      </li> 
     </ul> 
    </li> 

Answer 1

在你的jsfiddle碼位正常工作：手風琴菜單擴展，並且點擊時，他們崩潰。也許在你的網站代碼的其他地方有一個問題阻止了這一點。通常確保你的jQuery代碼在$(document).ready();內解決了無法運行的正確代碼的問題。

Answer 2

Bootstrap API頁面顯示您應該指定data-parent屬性。然後，嘗試添加data-parent =「accDash」給你的元素。

見http://getbootstrap.com/javascript/#collapse

希望它能幫助。

Answer 3

下面是Bootstrap site的示例（縮寫爲只有兩個面板）。基本上，外部div是一個id，例如id="accordion"，並且爲了產生手風琴效果（當您打開另一個可摺疊元素時，當前元素關閉），您爲每個標題設置data-toggle="collapse" data-parent="#accordion"。另一方面，如果要使每個可摺疊面板彼此獨立，以便一次可以打開多個面板，只需將其更改爲data-toggle="collapse" data-target="collapseOne"，其中collapseOne指的是面板的ID點擊標題打開。 （所以下一個小組將參考例如collapseTwo）。

這裏的jfiddle以及玩。

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     First collapsible panel 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Second collapsible panel 
     </div> 
    </div> 
    </div> 
</div>