Javascript 相互隐藏内容的手风琴

我想用手风琴把菜单放进去。我已经学习了教程。它似乎起作用了我唯一的问题是手风琴互相隐藏了内容。以下是我所做的以及结果如何：

现在点击手风琴的第一部分，这里就是结果

正如你所看到的，第二个手风琴保持固定，这隐藏了第一个菜单的导入部分

有人知道如何解决这个问题吗

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i
*{
框大小：边框框；
}
身体{
字体系列：Calibri；
字体大小：24px；
字体风格：普通；
字体变体：正常；
字号：100；
线高：26.4px；
}
@仅介质屏幕和（最大宽度：800px）{
/*对于平板电脑：*/
梅因先生{
宽度：80%；
填充：0；
}
.对{
宽度：100%；
}
}
@仅介质屏幕和（最大宽度：500px）{
/*移动电话：*/
.菜单，
梅因先生，
.对{
宽度：100%；
}
}
身体{
背景色：rgb（210219209）；
背景重复：无重复；
背景附件：固定；
背景位置：右下，50%50%；
背景尺寸：自动，封面；
}
/*设置选项卡的样式*/
.标签{
浮动：左；
溢出：隐藏；
边界：无；
背景色：rgb（27,85,44,0）；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
显示：块；
背景色：rgb（27,85,44,0）；
文本对齐：左对齐；
颜色：rgb（255、255、255）；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：rgb（39,87,55）；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：rgb（7,95,29）；
}
/*设置选项卡内容的样式*/
.tabcontent{
浮动：左；
填充：0px 0px；
/*边框：0实心#ccc*/
宽度：70%；
左边界：无；
高度：0spx；
保证金底部：-20px
}
.手风琴{
背景色：rgb（5,24,7）；
颜色：rgb（255、255、255）；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：中间对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.主动，
.手风琴：悬停{
背景色：rgb（0,77,165）；
}
.小组{
填充：0 18px；
背景色：rgb（0,0,0,0）；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
/*开关滑块*/
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
.滑块{
位置：绝对位置；
光标：0；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：rgb（7,95,29）；
}
输入：焦点+.滑块{
盒影：0.01×rgb（7,95,29）；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}
主要部分

一个
两个
三
第一部分
第1部分-第1部分
第1部分-第2部分
第1部分-第3部分
第二部分
第三部分

次要的
第二
其他
第三次
我给你写了一个片段。请添加CSS、脚本和HTML来制作PS:W3School不是一个很好的资源您不能像那样在
中包装div…@mplungjan hope现在更好了我为您制作了一个片段。请添加CSS、脚本和HTML以制作PS:W3School不是一个很好的资源您不能像那样在
中包装div…@mplungjan hope现在更好了