打开手风琴时如何自动关闭另一个手风琴？

在前端开发中，可以通过以下步骤实现打开手风琴时自动关闭另一个手风琴：

首先，为每个手风琴元素添加一个点击事件监听器。
在点击事件处理函数中，判断当前点击的手风琴元素是否已经处于打开状态。
如果当前手风琴元素已经处于打开状态，则将其关闭。
否则，关闭其他所有手风琴元素，并将当前手风琴元素打开。

以下是一个示例代码：

HTML部分：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header" onclick="toggleAccordion(1)">手风琴1</div>
    <div class="accordion-content">手风琴1的内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header" onclick="toggleAccordion(2)">手风琴2</div>
    <div class="accordion-content">手风琴2的内容</div>
  </div>
</div>

JavaScript部分：

function toggleAccordion(index) {
  var accordionItems = document.getElementsByClassName("accordion-item");
  
  // 判断当前手风琴元素是否已经处于打开状态
  var isOpen = accordionItems[index - 1].classList.contains("active");
  
  // 关闭其他所有手风琴元素
  for (var i = 0; i < accordionItems.length; i++) {
    accordionItems[i].classList.remove("active");
  }
  
  // 如果当前手风琴元素已经处于打开状态，则关闭它
  if (isOpen) {
    accordionItems[index - 1].classList.remove("active");
  } else {
    // 否则，将当前手风琴元素打开
    accordionItems[index - 1].classList.add("active");
  }
}

CSS部分：

.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  cursor: pointer;
  background-color: #eee;
  padding: 10px;
}

.accordion-content {
  display: none;
  padding: 10px;
}

.accordion-item.active .accordion-content {
  display: block;
}

在上述示例中，通过为手风琴元素添加一个active类来表示其处于打开状态。点击手风琴头部时，调用toggleAccordion函数，根据当前手风琴元素的状态进行相应的操作。关闭其他手风琴元素时，通过遍历所有手风琴元素并移除active类来实现。