页面加载时阻止首个Accordion展开的JavaScript解决方案求助

问题根源 #

你代码里的window.onload = function() { header[0].click(); }是导致第一个手风琴自动展开的直接原因——这段代码会在页面加载完成后主动触发第一个手风琴标题的点击事件，从而执行展开逻辑。

解决步骤 #

1. 删除自动触发点击的代码
   直接移除下面这段代码：

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

2. 确保初始状态完全关闭（可选但保险）
   虽然CSS已经设置.accordion-body的max-height: 0，但可以在页面加载时手动重置所有手风琴状态，避免意外：

document.addEventListener('DOMContentLoaded', function() {
  // 重置所有手风琴内容区域的高度
  const accordionBodies = document.querySelectorAll('.accordion-body');
  accordionBodies.forEach(body => {
    body.style.maxHeight = null;
  });
  // 移除所有手风琴的active类
  const accordions = document.querySelectorAll('.accordion');
  accordions.forEach(acc => {
    acc.classList.remove('active');
  });
});

优化点击事件逻辑（可选） #

你原有的点击事件存在冗余的toggle操作，可以简化逻辑，让代码更清晰：

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

headers.forEach(header => {
  header.addEventListener("click", function() {
    const allAccordions = document.querySelectorAll(".accordion");
    const currentAccordion = this.parentElement;
    const currentBody = this.nextElementSibling;

    // 先关闭所有手风琴
    allAccordions.forEach(acc => {
      acc.classList.remove('active');
      acc.children[1].style.maxHeight = null;
    });

    // 切换当前手风琴的状态：如果之前是关闭的，就打开它
    if (!currentAccordion.classList.contains('active')) {
      currentAccordion.classList.add('active');
      currentBody.style.maxHeight = currentBody.scrollHeight + "px";
    }
  });
});

完整代码示例 #

HTML

<div class="accordion-container">
  <div class="accordion">
    <div class="accordion-header">
      <h2>Accordion Header 1</h2>
    </div>
    
    <div class="accordion-body">
      <p>Accordion Body 1</p>
    </div>
  </div>

  <div class="accordion">
    <div class="accordion-header">
      <h2>Accordion Header 2</h2>
    </div>
    
    <div class="accordion-body">
      <p>Accordion Body 2</p>
    </div>
  </div>
</div>

CSS

.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;
}

JavaScript

const headers = document.querySelectorAll(".accordion-header");

headers.forEach(header => {
  header.addEventListener("click", function() {
    const allAccordions = document.querySelectorAll(".accordion");
    const currentAccordion = this.parentElement;
    const currentBody = this.nextElementSibling;

    allAccordions.forEach(acc => {
      acc.classList.remove('active');
      acc.children[1].style.maxHeight = null;
    });

    if (!currentAccordion.classList.contains('active')) {
      currentAccordion.classList.add('active');
      currentBody.style.maxHeight = currentBody.scrollHeight + "px";
    }
  });
});

// 页面加载时重置状态
document.addEventListener('DOMContentLoaded', function() {
  const accordionBodies = document.querySelectorAll('.accordion-body');
  accordionBodies.forEach(body => {
    body.style.maxHeight = null;
  });
  const accordions = document.querySelectorAll('.accordion');
  accordions.forEach(acc => {
    acc.classList.remove('active');
  });
});

内容的提问来源于stack exchange，提问作者Kareem Sultan