accordion - Bootstrap Accordion 未关闭

Question

我有一个运行正常的Bootstrap 3.0 Accordion ，当您单击其中一个主链接时，该 Accordion 将打开。唯一的问题是，如果您单击第二个主链接，则第一个链接不会折叠-它们都保持打开状态。

有没有办法使其他部分关闭，一次只打开一个？

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 Fiddle以及正在使用的 Accordion :
http://jsfiddle.net/lorkel/pK7cA/

Answer 1

这是一个已知的Bootstrap问题:https://github.com/twbs/bootstrap/issues/10966

如果将accordion-group更改为panel，则可以使用(但可能没有所需的样式)

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

希望它会在不久的将来得到修复，以便它不依赖于panel来使用data-parent。