Javascript 如何在此手风琴中打开一个默认选项卡，并在打开另一个选项卡时关闭该选项卡？

我不太擅长javascript，我只是使用w3的基本代码。我正在尝试在我的网站上放一个手风琴，上面列出了一些分类服务，我希望有一个标签可以一直扩展

这是我目前的代码：

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

/*设置用于打开和关闭手风琴面板的按钮的样式*/
手风琴{
背景色：#3bb7df；
颜色：#fff；
光标：指针；
填充：0 20px；
线高：54px；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
字号：17px；
字体大小：300；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
按钮。手风琴。激活，
按钮。手风琴：悬停{
背景色：#2894b7；
}
按钮。手风琴：之后{
内容：“+”；
字体大小：20px；
字体大小：400；
颜色：#fff；
边界：无；
浮动：对；
左边距：5px；
文本阴影：无；
}
按钮。手风琴。激活：之后{
内容：“–”；
}
/*设计手风琴面板的样式。注意：默认情况下隐藏*/
分区小组{
填充：0；
背景色：#F5；
边界：无；
边界半径：0px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
李分区{
列表样式：无；
边框顶部：实心1px#ddd；
}
李组：悬停{
背景：#e0；
}
a组{
颜色：#1d；
字体大小：15px；
显示：块；
填充：12px0；
}
正面面板一右前角{
填充：0 15px；
}

第1节





第二节





第三节

默认情况下打开第一个选项卡 要在默认情况下打开第一个选项卡（或任何其他选项卡），只需在所需的手风琴索引上调用

click（）

方法。这可以在JavaScript结束时完成：

acc[0].click(); // <-- Invoke the onClick for the first tab.

/*设置用于打开和关闭手风琴面板的按钮的样式*/
手风琴{
背景色：#3bb7df；
颜色：#fff；
光标：指针；
填充：0 20px；
线高：54px；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
字号：17px；
字体大小：300；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
按钮。手风琴。激活，
按钮。手风琴：悬停{
背景色：#2894b7；
}
按钮。手风琴：之后{
内容：“+”；
字体大小：20px；
字体大小：400；
颜色：#fff；
边界：无；
浮动：对；
左边距：5px；
文本阴影：无；
}
按钮。手风琴。激活：之后{
内容：“–”；
}
/*设计手风琴面板的样式。注意：默认情况下隐藏*/
分区小组{
填充：0；
背景色：#F5；
边界：无；
边界半径：0px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
李分区{
列表样式：无；
边框顶部：实心1px#ddd；
}
李组：悬停{
背景：#e0；
}
a组{
颜色：#1d；
字体大小：15px；
显示：块；
填充：12px0；
}
正面面板一右前角{
填充：0 15px；
}

第一节





第二节





第三节

考虑将当前打开选项卡的索引存储在数字变量中。然后，当单击任何选项卡时，删除

acc[索引]

的

“活动”

类

---

当然，您应该在停用

acc[index]

后存储索引，这样您就不会停用正在单击的项目。

您没有指定jQuery解决方案是否可以接受，但我在这里提供了一个。如果你需要的话，我可以重新设计以获得香草JS

另请注意，我通过使用继承属性

max height

$（文档）.ready（函数（）{
$（'.accordion'）。在（'click'，function（）上{
//首先从所有项目中删除“活动”
$（'.accordion'）.removeClass（'active'）；
//现在将“活动”添加到单击的项目中
$（this.toggleClass（'active'）；
})
//更改为要在加载时激活的任意数字
$（'.accordion:n类型（2'）。单击（）；
})

/*设置用于打开和关闭手风琴面板的按钮的样式*/
手风琴{
背景色：#3bb7df；
颜色：#fff；
光标：指针；
填充：0 20px；
线高：54px；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
字号：17px；
字体大小：300；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
按钮。手风琴。激活，
按钮。手风琴：悬停{
背景色：#2894b7；
}
按钮。手风琴：之后{
内容：“+”；
字体大小：20px；
字体大小：400；
颜色：#fff；
边界：无；
浮动：对；
左边距：5px；
文本阴影：无；
}
按钮。手风琴。激活：之后{
内容：“–”；
}
/*这将调整活动项目的最大高度*/
.手风琴.有源+面板{
最大高度：继承；
}
/*设计手风琴面板的样式。注意：默认情况下隐藏*/
分区小组{
填充：0；
背景色：#F5；
边界：无；
边界半径：0px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
李分区{
列表样式：n