这个javascript手风琴代码有什么问题？

var btn=document.querySelector（'.btn'）；
var-activePanel=document.querySelector（'.active'）；
var hiddenPanel=document.querySelectorAll（“section>div:not（.active）”；
var i；
对于（i=0；idiv:not（.active）”；
panel.classList.add（'.active'）；
otherPanels.classList.add（'.hidden'）；
}
});
};
*{
保证金：0；
填充：0；
框大小：边框框；
}
.btn{
颜色：白色；
背景颜色：棕色；
光标：指针；
}
.小组{
显示：无；
}
.主动{
显示：块；
}
.隐藏{
显示：无；
}

按钮1
小组1
按钮2
小组2
按钮3
小组3
按钮4
小组4

var btn=document.querySelectorAll（'.btn'）；
var-activePanel=document.querySelector（'.active'）；
var hiddenPanel=document.querySelectorAll（“section>div:not（.active）”；
var i；
对于（i=0；idiv”）；
otherPanels.forEach（p=>p.classList.add（'hidden'）；
panel.classList.remove（'hidden'）；
panel.classList.add（'active'）；
}
}
);
}
*{
保证金：0；
填充：0；
框大小：边框框；
}
.btn{
颜色：白色；
背景颜色：棕色；
光标：指针；
}
.小组{
显示：无；
}
.主动{
显示：块；
}
.隐藏{
显示：无；
}

按钮1
小组1
按钮2
小组2
按钮3
小组3
按钮4
小组4
将JavaScript代码更改为以下内容：

var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;

for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
      var otherPanels = document.querySelectorAll("section > div");
      otherPanels.forEach(function (panel) {
        panel.classList.remove('hidden');
        panel.classList.remove('active');
      });


      var panel = this.nextElementSibling;
      console.log(panel);
      panel.classList.add('active');

      var otherPanels = document.querySelectorAll("section > div:not(.active)");
      otherPanels.forEach(function (panel) {
        panel.classList.add('hidden');
      });
    });
}

var btn=document.querySelectorAll（'.btn'）；
var-activePanel=document.querySelector（'.active'）；
var hiddenPanel=document.querySelectorAll（“section>div:not（.active）”；
var i；
对于（i=0；idiv”）；
otherPanels.forEach（功能（面板）{
panel.classList.remove（'hidden'）；
panel.classList.remove（'active'）；
});
var panel=this.nextElementSibling；
控制台日志（面板）；
panel.classList.add（'active'）；
var otherPanels=document.querySelectorAll（“section>div:not（.active）”；
otherPanels.forEach（功能（面板）{
panel.classList.add（'hidden'）；
});
});
}

代码如下：
var btn=document.queryselectoral（'.btn'）；
var-activePanel=document.querySelector（'.active'）；
var hiddenPanel=document.querySelectorAll（“section>div:not（.active）”；
var i；
对于（i=0；idiv.active”）；
otherPanels.forEach（（item）=>{item.classList.remove（'active'）；}）
panel.classList.add（'active'）；
}
);
};

不要使用隐藏类，因为您已经在
.panel
类中添加了“
display:none
”，所以您只需删除并添加
active
class
即可添加到已经提到语法错误和其他修复的家伙中。您不需要任何循环、数组处理（如forEach等），每个按钮都不需要许多事件监听器。下面是一个简单明了的解决方案，第节介绍了事件侦听器：

let section = document.querySelector('#accordion');

section.addEventListener("click", function(event) {
  if(!event.target.classList.contains('btn')) return;

  let activePanel = section.querySelector('.active');
  let clickedPanel = event.target.nextElementSibling;

  clickedPanel.classList.add('active');
  activePanel && activePanel.classList.remove('active');
});

没有循环，只有一个事件侦听器，您只能使用一个当前元素和一个以前处于活动状态的元素（如果有）

希望对您有所帮助
您的代码中有语法错误。在
otherPanels.classList.add（'.hidden'）之后删除
}
var otherPanels=document.querySelector（“section>div.active”）；if（otherPanels）otherPanels.classList.remove（'active'）@evhenious你说得对，我很快就错过了它。@pratik kaneria非常感谢，它工作得很好，但当我单击一个按钮时，它会显示面板并隐藏其他面板，但当我同时再次单击同一按钮时，它不会隐藏面板。我尝试过切换，但效果不太好@Pawan Kumar非常感谢，它工作得很好，但当我点击一个按钮时，它会显示其面板并隐藏其他面板，但当我同时再次点击同一按钮时，它不会隐藏其面板。我试过切换，但效果不太好well@social“你现在能试试吗？”帕万·库马尔非常感谢。它可以更好地隐藏和显示，但如果另一个按钮不完全位于上一个单击按钮的下方，则需要双击该按钮以显示其面板。只想点击一键而不是双击来显示面板和多谢提前@Tuna Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank Thank so Thank，它工作得很好，但当我点击一个按钮时，它会显示面板并隐藏其他面板，但当我同时再次点击同一按钮时，它不会隐藏面板。我试过切换，但效果不太好well@social我已经用钢笔更新了代码。请检查
https://codepen.io/v08i/pen/RwNBJKN
@Tuna是的，谢谢它切换同一面板的“立即显示”和“隐藏”，但如果在显示后我没有自己隐藏它，那么我单击“其他”按钮，它也会显示自己的面板，但其他面板仍会显示，除非我自己隐藏它们。我只是希望它在我点击“新建”按钮时自动隐藏自己，而不是自己，而是自动隐藏。非常感谢你的光临advance@social对不起，我刚才搞砸了。现在检查，它应该可以正常工作。是的，非常感谢。现在它的工作原理完全符合我的要求，但请你再解释一下好吗。我对两件事感到困惑：1-变量otherPanels有两个dif
let section = document.querySelector('#accordion');

section.addEventListener("click", function(event) {
  if(!event.target.classList.contains('btn')) return;

  let activePanel = section.querySelector('.active');
  let clickedPanel = event.target.nextElementSibling;

  clickedPanel.classList.add('active');
  activePanel && activePanel.classList.remove('active');
});