Question

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

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

我已将网站升级到最新的bootstrap 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

如果您根据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');
        });

Answer 3

我遇到了类似的问题，但数据父母选项最初并没有奏效。

我的问题是我的页面上有两个面板组，指的是相同的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">

回想起来非常明显; - ）

Twitter Bootstrap，如何使崩溃插件关闭打开的项目并在点击时打开新的项目

3 个答案: