页面加载时自动展开第一个手风琴的实现技术求助

没问题！要实现页面加载时自动展开第一个手风琴，用JavaScript或者CSS都能轻松搞定，我给你两种实用方案，你可以根据自己的代码结构选择：

方案一：JavaScript 实现（灵活适配多数手风琴逻辑） #

这种方法适合大多数手风琴结构，不管你是用类切换、还是点击事件触发展开，都能适配：

// 等待页面DOM元素全部加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 选中第一个手风琴的触发元素（替换成你实际用的类名）
  const firstToggle = document.querySelector('.accordion-toggle:first-of-type');
  // 选中对应的内容面板（这里假设触发元素的下一个兄弟就是内容，根据实际结构调整）
  const firstContent = firstToggle.nextElementSibling;

  // 方案A：如果你的手风琴是通过添加/移除类来控制显示隐藏
  firstToggle.classList.add('active');
  firstContent.classList.add('active');

  // 方案B：如果原手风琴是通过点击事件触发展开，直接模拟点击即可
  // firstToggle.click();
});

提示：记得把代码里的类名替换成你项目中实际使用的类，如果结构不同，调整选择器即可。

方案二：CSS 实现（纯样式，无需脚本） #

如果你的手风琴是用CSS伪类（比如:checked）或者类来控制显示，也可以用纯CSS实现默认展开：

情况1：手风琴基于 input 复选框/单选框实现 #

如果结构是 input + label + 内容面板，可以直接让第一个内容面板默认显示：

/* 默认隐藏所有内容面板 */
.accordion-content {
  display: none;
}

/* 让第一个内容面板默认展开 */
.accordion-content:first-of-type {
  display: block;
}

/* 保留原有的点击展开逻辑 */
.accordion-toggle:checked + .accordion-label + .accordion-content {
  display: block;
}

情况2：手风琴基于类切换实现 #

直接在HTML里给第一个手风琴项加上激活类，再用CSS控制显示：

<!-- 给第一个手风琴项手动添加active类 -->
<div class="accordion-item active">
  <div class="accordion-toggle">标题1</div>
  <div class="accordion-content">内容1</div>
</div>
<div class="accordion-item">
  <div class="accordion-toggle">标题2</div>
  <div class="accordion-content">内容2</div>
</div>

/* 默认隐藏所有内容面板 */
.accordion-content {
  display: none;
}

/* 激活状态下显示内容 */
.accordion-item.active .accordion-content {
  display: block;
}

两种方案都能实现你要的效果，你可以根据自己的代码结构选最适合的~

内容的提问来源于stack exchange，提问作者John Wiky