在JavaScript中单击另一个手风琴时删除活动手风琴

我需要帮助解决侧边栏的JavaScript代码。我看到很多参考资料和帮助通常是通过jQuery完成的。我知道jQuery功能强大，但我更喜欢使用常规JavaScript，因为我对它非常陌生

如果你正在阅读这篇文章，请不要将其标记为“重复”或“投入”，因为我做JavaScript研究已经有一段时间了，我希望这篇文章对我自己和其他想要使用常规JavaScript的人有用

接下来，我实际上学会了制作一个简单的手风琴，你可以从中参考

同时，我已经成功地创建了自定义侧边栏。但问题是我希望我的活动手风琴在点击其他手风琴时关闭

游乐场：

const sideBar=document.getElementsByClassName（'pisti-sideBar'）；
for（设i=0；i

正文{
背景：#000000！重要；
宽度：100vw；
高度：100vh；
填充：20px；
}
/*pisti侧边栏在这里*/
.pisti侧边栏{
背景：无！重要；
边界：无；
左边框：2个实心#8888888；
颜色：#888888；
光标：指针；
字体大小：20px；
字体大小：400；
填充：10px 30px 10px 20px；
文本对齐：左对齐；
过渡期：0.3秒全部缓解；
宽度：100%；
}
.pisti侧边栏：第一个孩子{
填充顶部：0；
}
.pisti侧边栏标题{
左边框：2个实心#8888888；
显示：无；
溢出：隐藏；
过渡期：0.3秒全部缓解；
}
.pisti侧边栏：悬停{
边框颜色：#FFFFFF；
颜色：#f7cc1b；
过渡期：0.3秒全部缓解；
}
.pisti侧边栏处于活动状态，
.pisti侧栏：活动，
.pisti侧边栏：焦点{
边框颜色：#FFFFFF；
颜色：#f7cc1b！重要；
大纲：无；
}
.pisti侧边栏：焦点+.pisti侧边栏标题{
边框颜色：#FFFFFF；
过渡期：0.3秒全部缓解；
}
.pisti侧边栏内容{
颜色：#888888！重要；
显示：块；
字体大小：16px；
填充：0px 30px 10px 30px；
过渡期：0.3秒全部缓解；
}
.pisti侧边栏内容：悬停{
颜色：#FFFFFF！重要；
文字装饰：无；
过渡期：0.3秒全部缓解；
}
.pisti侧边栏内容：第一个孩子{
填充顶部：10px；
}
.pisti侧边栏内容：最后一个孩子{
垫底：10px；
}
/*pisti侧边栏激活*/
.onload激活{
颜色：#f7cc1b；
边框颜色：#FFFFFF；
显示：块；
}
.onload未激活{
颜色：#FFFFFF；
边框颜色：#888888；
}
.pisti侧边栏：焦点+.pisti侧边栏标题{
边框颜色：#FFFFFF；
过渡期：0.3秒全部缓解；
}
.pisti侧栏标题处于活动状态{
边框颜色：#FFFFFF；
}
.pisti侧边栏标题处于活动状态，
.pisti侧边栏内容处于活动状态{
颜色：#f7cc1b！重要；
}
.pisti侧边栏内容处于活动状态：：之前{
背景色：#FFFFFF；
边框右上角半径：2px；
边框右下半径：2px；
内容：''；
高度：10px；
左：16px；
边缘顶部：8px；
位置：绝对位置；
宽度：6px；
}

幽灵的
数码印刷
胶印

更改了CSS&JS以排除在

for

循环中切换的列表。相反，只需切换按钮上的

.active

类，并使用相邻的选择器

.pisti-sidebar.active+.pisti侧边栏标题

，即可显示其列表

const sideBars=document.getElementsByClassName（'pisti-sidebar'）；
for（让侧边栏中的侧边栏）{
sideBar.onclick=e=>{
var thisEl=e.target；
if（thisEl.classList.contains（'active'））{
thisEl.classList.remove（'active'）；
}否则{
thisEl.classList.add（'active'）；
for（侧栏的活动侧栏）{
if（activeSideBar！=thisEl）{
activeSideBar.classList.remove（'active'）；
}
}
}
}
}

正文{
背景：#000000！重要；
宽度：100vw；
高度：100vh；
填充：20px；
}
.pisti侧边栏{
背景：无！重要；
边界：无；
左边框：2个实心#8888888；
颜色：#888888；
光标：指针；
字体大小：20px；
字体大小：400；
填充：10px 30px 10px 20px；
文本对齐：左对齐；
过渡期：0.3秒全部缓解；
宽度：100%；
}
.pisti侧边栏：第一个孩子{
填充顶部：0；
}
.pisti侧边栏标题{
左边框：2个实心#8888888；
显示：无；
溢出：隐藏；
过渡期：0.3秒全部缓解；
}
.pisti侧栏：活动，
.pisti侧边栏：焦点{
大纲：无；
}
.pisti侧边栏。活动+.pisti侧边栏标题{
显示：块；
}
.pisti侧边栏内容{
颜色：#888888！重要；
显示：块；
字体大小：16px；
填充：0px 30px 10px 30px；
过渡期：0.3秒全部缓解；
}
.pisti侧边栏内容：悬停{
颜色：#FFFFFF！重要；
文字装饰：无；
过渡期：0.3秒全部缓解；
}
.pisti侧边栏内容：第一个孩子{
填充顶部：10px；
}
.pisti侧边栏内容：最后一个孩子{
垫底：10px；
}
.主动{
颜色：#f7cc1b；
边框颜色：#FFFFFF；
显示：块；
}
.onload未激活{
颜色：#FFFFFF；
边框颜色：#888888；
}
.pisti侧边栏：焦点+.pisti侧边栏标题{
边框颜色：#FFFFFF；
过渡期：0.3秒全部缓解；
}
.pisti侧栏标题处于活动状态{
边框颜色：#FFFFFF；
}
.pisti侧边栏标题处于活动状态，
.pisti侧边栏内容处于活动状态{
颜色：#f7cc1b！重要；
}
.pisti侧边栏内容处于活动状态：：之前{
背景色：#FFFFFF；
边框右上角半径：2px；