打开div并关闭所有其他div并在单击时更改箭头

<div class="accordion">
  <div class="accordion-header" onclick="toggleAccordion(1)">
    <span>标题1</span>
    <span class="arrow">▼</span>
  </div>
  <div class="accordion-content">
    内容1
  </div>
</div>

<div class="accordion">
  <div class="accordion-header" onclick="toggleAccordion(2)">
    <span>标题2</span>
    <span class="arrow">▼</span>
  </div>
  <div class="accordion-content">
    内容2
  </div>
</div>

<!-- 其他div... -->

.accordion-content {
  display: none;
}

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

.accordion-header {
  cursor: pointer;
}

.accordion-header .arrow {
  transition: transform 0.3s ease;
}

.accordion.active .accordion-header .arrow {
  transform: rotate(180deg);
}

function toggleAccordion(index) {
  const accordions = document.getElementsByClassName('accordion');
  const accordion = accordions[index - 1];
  const isActive = accordion.classList.contains('active');

  // 关闭所有其他div
  for (let i = 0; i < accordions.length; i++) {
    if (i !== index - 1) {
      accordions[i].classList.remove('active');
    }
  }

  // 切换箭头方向
  const arrow = accordion.querySelector('.arrow');
  arrow.textContent = isActive ? '▼' : '▲';

  // 切换当前div的状态
  accordion.classList.toggle('active');
}