在JavaScript中单击另一个折叠时删除活动折叠

<div class="collapse" onclick="toggleCollapse(this)">
  <h2 class="collapse-header">折叠标题</h2>
  <div class="collapse-content">
    折叠内容
  </div>
</div>

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

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

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

function toggleCollapse(element) {
  var isActive = element.classList.contains('active');

  // 判断当前折叠元素是否处于活动状态
  if (isActive) {
    element.classList.remove('active');
    element.querySelector('.collapse-content').style.display = 'none';
  } else {
    var activeElements = document.querySelectorAll('.collapse.active');

    // 如果存在其他活动元素，先移除其活动状态
    if (activeElements.length > 0) {
      activeElements.forEach(function (activeElement) {
        activeElement.classList.remove('active');
        activeElement.querySelector('.collapse-content').style.display = 'none';
      });
    }

    element.classList.add('active');
    element.querySelector('.collapse-content').style.display = 'block';
  }
}