Twitter Bootstrap，如何使折叠插件关闭打开的项目并在点击时打开新的项目答案

【问题标题】：Twitter Bootstrap, how to make the collapse plugin close the open item and open the new one on clickTwitter Bootstrap，如何使折叠插件关闭打开的项目并在点击时打开新的项目
【发布时间】：2012-08-26 14:29:10
【问题描述】：

我的页面左侧有一个我认为是简单的 twtter 引导折叠项设置： http://papershare.ravennainteractive.com/single-item.html

当您单击一个手风琴标题时，它会打开，但当您单击另一个时，它也会打开那个手风琴标题，而不是关闭第一个并打开第二个。

我已将网站升级到最新的引导 js 和 css。

如何让它在打开另一个时关闭打开的一个？

谢谢

【问题讨论】：

最好在问题正文中包含代码的相关部分（例如，手风琴标记），提供的链接仅供参考。

标签： twitter-bootstrap collapse

【解决方案1】：

结构需要（伪代码）

< class="accordion" id="myAccordion">
    < class="accordion-group">
        < class="accordion-header">
            <a data-parent="#myAccordion">
        < class="accordion-body">

    < class="accordion-group">
        < class="accordion-header">
            <a data-parent="#myAccordion">
        < class="accordion-body">

accordion-group 表示将单独折叠的单独部分。切换手风琴组的链接中的data-parent 类用于确定应关闭同一父级中的其他手风琴组。

【讨论】：

【解决方案2】：

如果您根据bootstrap collapse docs 制作了 HTML 标记，则可以使用此复制/粘贴简单的 jquery 代码来实现此目的。

$(document).on('click', '.accordion-toggle', function(e) {
            event.preventDefault();

            $('#accordion').find('.accordion-body').collapse('hide');
            $(this).parent().next().collapse('show');
        });

【讨论】：

【解决方案3】：

我遇到了类似的问题，但 data-parent 选项起初不起作用。

我的问题是我的页面上有两个面板组引用相同的 ID #accordion。解决方案是给每个组一个唯一的 id

<!-- Accordion 1 -->
< class="accordion" id="myAccordion">
    < class="accordion-group">
        < class="accordion-header">
            <a data-parent="#myAccordion">
        < class="accordion-body">

    < class="accordion-group">
        < class="accordion-header">
            <a data-parent="#myAccordion">
        < class="accordion-body">

<!-- Accordion 2 -->
< class="accordion" id="myAccordion-2">
    < class="accordion-group">
        < class="accordion-header">
            <a data-parent="#myAccordion-2">
        < class="accordion-body">

    < class="accordion-group">
        < class="accordion-header">
            <a data-parent="#myAccordion-2">
        < class="accordion-body">

回想起来很明显;-)

【讨论】：