Bootstrap 手风琴式组管理

Question

div#footer-panels 中有两个可折叠项目。我也在使用data-parent="#footer-panels" 来尝试实现手风琴效果。但是，当打开另一个面板时，另一个面板并没有关闭。

对我的标记有什么问题有任何想法吗？

<div id="footer-panels">
    <div id="footer-email-signup" class="container collapse">
        <div class="row">
             <h4>Newsletter</h4>

        </div>
    </div>
    <div id="footer-follow-us" class="container collapse">
        <div class="row">
             <h4>Follow Us</h4>

        </div>
    </div>
</div>
<nav id="utility-nav" class="container">
    <ul class="nav-justified visible-desktop">
        <li> <a id="email-signup-link" class="collapsed" data-toggle="collapse" data-parent="#footer-panels" data-target="#footer-email-signup" href="#">Newsletter Signup <span class="dropup-caret"></span></a>

        </li>
        <li> <a id="follow-us-link" class="collapsed" data-toggle="collapse" data-parent="#footer-panels" data-target="#footer-follow-us" href="#">Follow Us <span class="dropup-caret"></span></a>

        </li>
    </ul>
</nav>

见：http://jsfiddle.net/V6928/2/

编辑（解决方案）：您需要使用具有类 .panel 的 div 包装 .collapse div。查看更新的小提琴：http://jsfiddle.net/V6928/3/。

Answer 1

这是我的最小工作示例：

<div id="accordion">
    <div class="panel"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">One</a>
        <div id="collapseOne" class="panel-collapse collapse">1 Foo</div>
    </div>
    <div class="panel"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Two</a>
        <div id="collapseTwo" class="panel-collapse collapse">2 Bar</div>
    </div>
</div>

Fiddle

我使用了代码形式getboostrap.com/javascript。它还说：

使用折叠插件，我们通过扩展构建了一个简单的手风琴 面板组件。

所以你需要class='panel'。