Javascript 手风琴|输入框手风琴的点击正在展开

我正在使用javascript函数来扩展和折叠手风琴。我想一次展开一个项目，当我尝试向输入框中添加一些文本时，手风琴也会展开。 请参阅“

---

在当前的代码段中，您正在更改单击面板的样式，而不做任何事情来打开accordion。您需要更新其他打开的手风琴的样式并将其隐藏

因此，我已经更新了该代码以使用类，并单击从所有面板中删除类并切换单击的面板

以下代码将确保一次仅打开一个手风琴

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    // get list of panels
    const panels = document.getElementsByClassName('panel');
    // get panel for clicked button
    var panel = this.nextElementSibling;
    for(let i = 0; i < panels.length; i++){
      // if panel is not equal to clicked panel then remove class
      if(panel != panels[i]){
        panels[i].classList.remove('active-panel');
      }     
    }
    this.classList.toggle("active");    
    panel.classList.toggle('active-panel');
  });
}

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

使用jsiddlelink应该可以解决这个问题，但是可能有更好的解决方案。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    // get list of panels
    const panels = document.getElementsByClassName('panel');
    // get panel for clicked button
    var panel = this.nextElementSibling;
    for(let i = 0; i < panels.length; i++){
      // if panel is not equal to clicked panel then remove class
      if(panel != panels[i]){
        panels[i].classList.remove('active-panel');
      }     
    }
    this.classList.toggle("active");    
    panel.classList.toggle('active-panel');
  });
}