javascript - Bootstrap 的 Accordion 控件无法正常工作

Question

现场版在这里: http://www.bootply.com/7aYZsAKgSy

我的页面上有两个希望它们折叠或展开彼此独立，我不希望其中一个影响其他的状态。

所以我有这样的东西:

<div class="container">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL1">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        PANEL 1
                    </a>
                </h4>
            </div>
            <div id="PANEL1" class="panel-collapse collapse in">
                <div>
                THERE IS A FORM HERE THAT IS THE STUFF IN THIS PANEL
                </div>
            </div>
        </div>
    </div>
</div>

下面又多了一个，很像copy paste，只是内部DIV的ID不同:

我的页面上有两个希望它们折叠或展开彼此独立，我不希望其中一个影响其他的状态。

所以我有这样的东西:

<div class="container">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL2">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        PANEL 1
                    </a>
                </h4>
            </div>
            <div id="PANEL2" class="panel-collapse collapse in">
                <div>
                THERE IS another FORM HERE THAT IS THE STUFF IN THIS PANEL
                </div>
            </div>
        </div>
    </div>
</div>

然后是我的 JavaScript:

$('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

所以有时候可以，有时候不行。当它们都打开并且我首先关闭第二个时，它也会关闭第一个。

Answer 1

这是你想要的吗？

http://www.bootply.com/MiQbLj7uIA

我刚刚更改了第二个 Accordion 的 ID 及其数据父值。