单击另一个折叠项目时保持打开状态

<div class="accordion">
  <div class="item">
    <div class="header">项目1</div>
    <div class="content">项目1的内容</div>
  </div>
  <div class="item">
    <div class="header">项目2</div>
    <div class="content">项目2的内容</div>
  </div>
  <div class="item">
    <div class="header">项目3</div>
    <div class="content">项目3的内容</div>
  </div>
</div>

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

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

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

// 获取所有折叠项目的头部元素
const headers = document.querySelectorAll('.header');

// 给每个头部元素添加点击事件处理
headers.forEach(header => {
  header.addEventListener('click', () => {
    // 切换当前项目的内容显示/隐藏状态
    const content = header.nextElementSibling;
    content.style.display = content.style.display === 'none' ? 'block' : 'none';

    // 关闭其他项目的内容
    const otherContents = document.querySelectorAll('.content:not(:first-of-type)');
    otherContents.forEach(otherContent => {
      otherContent.style.display = 'none';
    });
  });
});