Javascript 引导程序的手风琴控制未正确工作

现场版本：

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

所以我有这样的想法：

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

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

因此，有时有效，有时无效。当它们都打开时，我首先关闭第二个，它也会关闭第一个

这就是你想要的吗

http://www.bootply.com/MiQbLj7uIA

---

我刚刚更改了第二个手风琴的id及其数据父值。

如果在同一页上有两个独立的手风琴，您应该为它们指定不同的id。我认为您可以删除

数据父属性。我认为它的目的是关闭所有其他你不想要的可折叠文件。但我不知道他是想要那个，还是想要一个可以独立展开部分的手风琴。如果他想要后者，他可以完全删除
数据父项
属性。@ValterJunior我认为它现在运行良好。谢谢。@Andrew:我的页面上最终会有八个这样的按钮，每个按钮应该独立于其他按钮打开/关闭。你认为瓦特的密码会有问题吗？@Bohn瓦特的密码不会有任何问题。但是，如果您只想有8个打开和关闭面板，那么可能会有不必要的代码。您可以删除所有的
id=“accordion”
和
id=“accordio2”
和
data parent=“accordion”
和
data parent=“accordio2”
，其工作原理相同。
http://www.bootply.com/MiQbLj7uIA