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'。

Bootstrap手风琴式组管理

1 个答案: