Javascript 为什么accordion类会触发其他具有不同名称的面板

为什么我的一些acordin会触发其他acordin，而它们的命名都不同呢

我一直在试图解决这个问题，当我在第二个、第三个或第四个面板中打开第二个acordion，并且第一个面板的第二个acordion打开时，它们会将其关闭。同样的问题也会多次发生，其他面板会使不同的面板疲劳，而不是它们应该是什么样子

@导入url(http://fonts.googleapis.com/css?family=Lato:100，300400700900100Italic，300italic，400italic，700italic，900italic）；
身体{
背景#111d27；
颜色：#111；
/*最小宽度：320px*/
最小宽度：1024px；
字体大小：16px；
字体大小：300；
线高：1.6；
-webkit字体平滑：抗锯齿；
-webkit背面可见性：隐藏；
位置：相对位置；
填充：50px 20px；
}
梅因先生{
文本对齐：居中；
颜色：#777；
字体大小：14px；
左侧填充：0；
边缘底部：30px；
背景色：#F5；
字体系列：“Lato”；
}
.主img{
显示：块；
保证金：自动；
宽度：32px；
}
李梅因：第一个孩子，
李梅因：最后一个孩子{
填充：5px 5px 0px 0px；
}
李梅因先生{
列表样式：无；
填充：13px；
}
.main li+li{
边框顶部：1px实心#f0；
}
.主要大{
字体大小：32px；
}
.main h3{
页边距底部：0；
字体大小：36px；
}
.main h4{
页边距底部：0；
字体大小：15px；
}
.主跨{
字体大小：12px；
颜色：#999；
字体大小：正常；
}
李少杰：第n个孩子（2）{
填充：5px13px；
}
.主按钮{
宽度：自动；
保证金：自动；
字体大小：15px；
字体大小：粗体；
边界半径：50px；
颜色：#fff；
填充：9px 24px；
背景：#aaa；
不透明度：1；
过渡：不透明度。2s缓解；
边界：无；
大纲：无；
}
.主按钮：悬停{
不透明度：.9；
}
.主按钮：激活{
盒影：插入0px 2px 2px rgba（0,0,0,0.1）；
}
/*主色*/
.a-绿色大，
.a-绿色h3{
颜色：#4c7737；
}
.a-绿色h4{
颜色：#4c7737；
}
.a绿色按钮{
背景#4c7737；
}
.a-yel big，
.a-yel h3{
颜色：#ffbb42；
}
.a-yel h4{
颜色：#ffbb42；
}
.a-yel按钮{
背景#ffbb42；
}
.a-红色大，
.a-红色h3{
颜色：#e13c4c；
}
.a-红色h4{
颜色：#e13c4c；
}
.红色按钮{
背景：#e13c4c；
}
.蓝色大的，
.a-蓝色h3{
颜色：#2e5dea；
}
.a-蓝色h4{
颜色：#2e5dea；
}
.蓝色按钮{
背景：#2e5dea；
}

可折叠1


协调

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。



可折叠2


协调

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。



可折叠3


协调

<div class="panel-group" id="accordion2">
...
  <a data-toggle="collapse" data-parent="#accordion2" href="">
...
<div class="panel-group" id="accordion3">
...
  <a data-toggle="collapse" data-parent="#accordion3" href="">
...
<div class="panel-group" id="accordion4">
...
  <a data-toggle="collapse" data-parent="#accordion4" href="">