twitter-bootstrap - Twitter Bootstrap，如何让折叠插件关闭打开的项目并在点击时打开新的项目

Question

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

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

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

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

谢谢

Answer 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类用于确定应关闭同一父级中的其他手风琴组。

Answer 2

如果您根据引导折叠文档制作了 HTML 标记，则可以使用此复制/粘贴简单的 jquery 代码来实现此目的。

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

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

Answer 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">

回想起来很明显;-)