纯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;
  /* 其他样式 */
}

.accordion .accordion-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-decoration: underline;
}

.accordion .accordion-body {
  max-height: 0; /* 初始状态，面板关闭 */
  overflow: hidden;
  transition: max-height ease 0.5s; /* 展开/折叠过渡效果 */
  padding: 0 20px;
}

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

/* 当手风琴处于激活状态时，展开内容 */
.accordion.active .accordion-body {
  /* max-height 会在JS中动态设置 */
}

// ============== 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; // .accordion 元素
      let siblings = this.nextElementSibling; // .accordion-body 元素

      // ============= remove accordion body height ==========//
      // 这一段逻辑似乎旨在确保在展开当前手风琴前，先关闭所有其他手风琴
      accordion.forEach((element) => {
        element.children[1].style.maxHeight = null;
      });

      // =========== toggle active class ==============//
      parentElm.classList.toggle("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类，确保其被激活
        parentElm.classList.toggle("active"); // 这一行实际上是多余的，会撤销上一行的操作

        // ============= set max height ============//
        if (siblings.style.maxHeight) {
          siblings.style.maxHeight = null;
        } else {
          siblings.style.maxHeight = siblings.scrollHeight + "px";
        }
      }
    });
  }
);

// 导致问题的原因：在页面加载完成后，程序化地模拟点击了第一个手风琴头部
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; // 获取当前手风琴的父元素 (.accordion)
      let siblings = this.nextElementSibling; // 获取手风琴内容体 (.accordion-body)

      // 优化后的逻辑：关闭所有其他手风琴，并重置其maxHeight
      accordion.forEach((element) => {
        if (element !== parentElm && element.classList.contains("active")) {
          element.classList.remove("active");
          element.children[1].style.maxHeight = null;
        }
      });

      // 切换当前手风琴的激活状态
      parentElm.classList.toggle("active");

      // 根据激活状态设置或移除maxHeight
      if (parentElm.classList.contains("active")) {
        siblings.style.maxHeight = siblings.scrollHeight + "px";
      } else {
        siblings.style.maxHeight = null;
      }
    });
  }
);

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