如何在另一个打开时关闭手风琴面板？

// 获取手风琴面板的DOM元素
var accordionPanels = document.querySelectorAll('.accordion-panel');

// 添加事件监听器
accordionPanels.forEach(function(panel) {
  panel.addEventListener('click', function() {
    // 判断点击的面板是否处于打开状态
    var isOpen = this.classList.contains('open');
    
    // 如果点击的是已经打开的面板，则关闭它
    if (isOpen) {
      this.classList.remove('open');
    }
    // 如果点击的是关闭的面板，则关闭其他已打开的面板，并打开当前面板
    else {
      accordionPanels.forEach(function(panel) {
        panel.classList.remove('open');
      });
      this.classList.add('open');
    }
  });
});

<div class="accordion">
  <div class="accordion-panel" id="panel1">面板1</div>
  <div class="accordion-panel" id="panel2">面板2</div>
  <div class="accordion-panel" id="panel3">面板3</div>
</div>

.accordion-panel {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.accordion-panel.open {
  height: 100px;  /* 设置打开时的高度 */
}

// 获取手风琴面板的DOM元素
var accordionPanels = document.querySelectorAll('.accordion-panel');

// 添加事件监听器
accordionPanels.forEach(function(panel) {
  panel.addEventListener('click', function() {
    // 判断点击的面板是否处于打开状态
    var isOpen = this.classList.contains('open');
    
    // 如果点击的是已经打开的面板，则关闭它
    if (isOpen) {
      this.classList.remove('open');
    }
    // 如果点击的是关闭的面板，则关闭其他已打开的面板，并打开当前面板
    else {
      accordionPanels.forEach(function(panel) {
        panel.classList.remove('open');
      });
      this.classList.add('open');
    }
  });
});