Bootstrap Accordion沒有關閉

Question

我有一個正常運行的Bootstrap 3.0手風琴，當您點擊其中一個主要鏈接時會打開。唯一的問題是，如果你點擊第二個主鏈接，第一個鏈接不會摺疊 - 它們都保持打開狀態。

有沒有辦法讓其他部分關閉，一次只留下一個部分？

HTML：

<div class="container"> 
    <!-- begin left nav --> 
    <div class="col-sm-2"> 
     <div class="left-nav"> 
      <div class="accordion" id="accordion2"> 
       <!-- group start --> 
       <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
        Main Link 1 
        </a> 
       </div> 
       <div id="collapseOne" class="accordion-body collapse"> <!-- add "in" to class to load acc section open --> 
        <div class="accordion-inner"> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 1</a></div> <!-- add "selected-section" to add background color --> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 2</a></div> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 3</a></div> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 4</a></div> 
        </div> 
       </div> 
       </div> <!-- end group --> 
       <!-- group start --> 
       <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
        Main Link 2 
        </a> 
       </div> 
       <div id="collapseTwo" class="accordion-body collapse"> 
        <div class="accordion-inner"> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        </div> 
       </div> 
       </div> <!-- end group --> 
       <!-- group start --> 
       <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
        Main Link 3 
        </a> 
       </div> 
       <div id="collapseThree" class="accordion-body collapse"> 
        <div class="accordion-inner"> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        </div> 
       </div> 
       </div> <!-- end group --> 
       <!-- group start --> 
       <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"> 
        Main Link 4 
        </a> 
       </div> 
       <div id="collapseFour" class="accordion-body collapse"> 
        <div class="accordion-inner"> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        </div> 
       </div> 
       </div> <!-- end group --> 
       <!-- group start --> 
       <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive"> 
        Main Link 5 
        </a> 
       </div> 
       <div id="collapseFive" class="accordion-body collapse"> 
        <div class="accordion-inner"> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div> 
        </div> 
       </div> 
       </div> <!-- end group --> 
      </div> 
     </div> 
    </div> 
    <!-- /left nav --> 

CSS：

body { 
    margin: 10px; 
    background-color: #eee; 
} 

.left-nav { 
width:200px; 
padding: 15px; 
font-size: 110%; 
text-transform: uppercase; 
background-color:#ff0; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 
-khtml-border-radius: 2px; 
border-radius: 2px; 
background: rgb(255, 255, 255) transparent; 
background: rgba(255, 255, 255, 0.6); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)"; 
overflow:hidden; 
} 

a.leftnav-primary:link { color:#363; text-decoration: none; } 
a.leftnav-primary:visited { color:#363; text-decoration: none; } 
a.leftnav-primary:hover { color:#6e2585; text-decoration: none; } 
a.leftnav-primary:active { color:#363; text-decoration: underline; } 

a.leftnav-secondary:link { color:#6c6f70; text-decoration: none; font-size: 90%; } 
a.leftnav-secondary:visited { color:#6c6f70; text-decoration: none; font-size: 90%; } 
a.leftnav-secondary:hover { color:#6e2585; text-decoration: none; font-size: 90%; } 
a.leftnav-secondary:active { color:#6e2585; text-decoration: underline; font-size: 90%; } 

.left-nav-section { padding-left: 20px; } 
.left-nav-section:hover { background-color: #eee; } 

這裏是我的JS撥弄工作手風琴： http://jsfiddle.net/lorkel/pK7cA/

Answer 1

這是一個已知的引導問題：https://github.com/twbs/bootstrap/issues/10966

如果您改變accordion-group到panel它會工作（但可能沒有所需的樣式）

http://jsfiddle.net/pK7cA/1/

希望這將是固定在不久的將來，這樣它不依賴於panel使用的data-parent。

Answer 2

有一種方法可以關閉其他人。如果有人像我一樣來這裏搜索。

這樣做的方法是維護「數據父母」與手風琴的id相同。

如果家長

<div class="panel-group" id="accordion123"> 

然後兒童必須有：

<div class="panel panel-default"> 
     <div class="panel-heading" ... data-parent="#accordion123"> 
     </div> 
</div> 

Answer 3

<div id="accordion" role="tablist" aria-multiselectable="true"> 
    All panels inside this.. 
</div> 

在我們的情況下，問題是在HTML結構，因爲我們有<div id="accordion> foreach循環中。解決方法是爲所有面板使用單一手風琴。