解决纯JavaScript手风琴组件首项自动展开问题

<div class="accordion-container">
  <div class="accordion">
    <div class="accordion-header">
      <h2>手风琴标题 1</h2>
    </div>
    <div class="accordion-body">
      <p>这是手风琴内容 1。</p>
    </div>
  </div>

  <div class="accordion">
    <div class="accordion-header">
      <h2>手风琴标题 2</h2>
    </div>
    <div class="accordion-body">
      <p>这是手风琴内容 2。</p>
    </div>
  </div>

  <!-- 更多手风琴项 -->
</div>

.accordion-container {
  padding: 0 100px;
}

.accordion .accordion-header {
  padding: 15px 20px;
  cursor: pointer; /* 提示用户可点击 */
  position: relative;
  background-color: #f0f0f0; /* 示例背景色 */
  border-bottom: 1px solid #ccc;
}

.accordion .accordion-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  /* text-decoration: underline; */ /* 根据需要决定是否添加下划线 */
}

.accordion .accordion-body {
  max-height: 0; /* 默认隐藏，通过JS控制max-height实现展开 */
  overflow: hidden; /* 隐藏超出内容 */
  transition: max-height ease 0.5s; /* 平滑过渡效果 */
  padding: 0 20px;
  background-color: #ffffff; /* 示例背景色 */
}

.accordion .accordion-body p {
  font-weight: 400;
  padding-bottom: 20px;
  line-height: 1.5;
}

/* 当手风琴项处于激活状态时的样式 */
.accordion.active .accordion-header {
  background-color: #e0e0e0;
}

/* 注意：.accordion.active .accordion-body 的 max-height 会由 JavaScript 动态设置 */

// ============== toggle accordion =================//
let header = document.querySelectorAll(".accordion-header");

// ============= get all accoridon header =============//
header.forEach(
  (header) => {
    header.addEventListener("click", function(e) {
      let accordion = document.querySelectorAll(".accordion");
      let parentElm = header.parentElement; // 获取当前点击header的父级.accordion
      let siblings = this.nextElementSibling; // 获取当前点击header的兄弟元素.accordion-body

      // ============= remove accordion body height ==========//
      // 遍历所有手风琴，重置其内容体高度，确保只有一个展开
      accordion.forEach((element) => {
        element.children[1].style.maxHeight = null;
      });

      // =========== toggle active class ==============//
      parentElm.classList.toggle("active"); // 切换当前手风琴项的active类
      if (parentElm.classList.contains("active")) {
        // ============== remove active class from all the accordions ===//
        // 再次遍历所有手风琴，移除所有active类（这部分逻辑可能导致意外行为，通常只移除其他兄弟元素的active类）
        accordion.forEach((element) => {
          element.classList.remove("active");
        });
        // ============== toggle active class where we clicked ========//
        // 重新添加active类到当前点击的项，确保它是唯一的active项
        parentElm.classList.toggle("active");

        // ============= set max height ============//
        // 设置内容体的max-height以展开或折叠
        if (siblings.style.maxHeight) {
          siblings.style.maxHeight = null; // 如果已展开，则折叠
        } else {
          siblings.style.maxHeight = siblings.scrollHeight + "px"; // 否则展开
        }
      }
    });
  }
);

// ！！！导致问题的原因：页面加载时模拟点击第一个手风琴标题 ！！！
window.onload = function() {
  header[0].click();
}

window.onload = function() {
  header[0].click();
}

// ============== toggle accordion =================//
let header = document.querySelectorAll(".accordion-header");

// ============= get all accoridon header =============//
header.forEach(
  (header) => {
    header.addEventListener("click", function(e) {
      let accordion = document.querySelectorAll(".accordion");
      let parentElm = header.parentElement; // 获取当前点击header的父级.accordion
      let siblings = this.nextElementSibling; // 获取当前点击header的兄弟元素.accordion-body

      // 优化：在切换当前项之前，先关闭所有其他已展开的项
      accordion.forEach((element) => {
        if (element !== parentElm && element.classList.contains('active')) {
          element.classList.remove("active");
          element.children[1].style.maxHeight = null;
        }
      });

      // =========== toggle active class and content height ==============//
      parentElm.classList.toggle("active"); // 切换当前手风琴项的active类

      if (parentElm.classList.contains("active")) {
        // 如果当前项被激活（展开）
        siblings.style.maxHeight = siblings.scrollHeight + "px"; // 设置高度以展开
      } else {
        // 如果当前项被取消激活（折叠）
        siblings.style.maxHeight = null; // 重置高度以折叠
      }
    });
  }
);

// ！！！已移除导致自动展开的代码 ！！！
// window.onload = function() {
//   header[0].click();
// }