在手风琴列表中，当子元素上发生单击时，如何打开被单击的元素并关闭其他元素？

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Item 1</div>
    <div class="accordion-content">Content 1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 2</div>
    <div class="accordion-content">Content 2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 3</div>
    <div class="accordion-content">Content 3</div>
  </div>
</div>

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

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

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

var accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(function(item) {
  var header = item.querySelector('.accordion-header');
  var content = item.querySelector('.accordion-content');

  header.addEventListener('click', function() {
    // 切换打开/关闭状态
    item.classList.toggle('open');

    // 关闭其他元素
    accordionItems.forEach(function(otherItem) {
      if (otherItem !== item) {
        otherItem.classList.remove('open');
      }
    });
  });
});