如何修改现有代码实现accordion菜单页面加载时默认展开指定项

复用现有toggle_item展开方法，在页面初始化时匹配指定的默认菜单项，主动触发一次展开逻辑，不改动原有点击交互，同时支持后续新增菜单项时灵活切换默认展开项。

1. 两种灵活指定默认展开项的方式 #

根据后续使用场景二选一即可，两种方式都支持新增任意数量菜单项时调整默认展开项。

• 方式1（推荐）：通过HTML类标识指定。后续修改默认展开项时，只需在HTML里移动标识类，无需改动JS逻辑，给需要默认展开的.accordion__item添加自定义类accordion__item--default-open即可。
• 方式2：通过JS索引配置指定。适合菜单项顺序固定、不想修改HTML的场景，直接在JS里配置默认展开项的索引（从0开始计数，第1个项为0，第2个为1，以此类推）。

2. 完整修改后的代码 #

HTML #

<div class="accordion">
  <!-- 给需要默认展开的项添加标识类，后续改默认项只需移动这个类 -->
  <div class="accordion__item accordion__item--default-open">
    <div class="accordion__title">Lorem ipsum dolor sit</div>
    <div class="accordion__body">
      <div class="accordion__content">
        <ul>
          <li>x</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 后续新增菜单项示例 -->
  <div class="accordion__item">
    <div class="accordion__title">第二个菜单项标题</div>
    <div class="accordion__body">
      <div class="accordion__content">第二个菜单项的内容</div>
    </div>
  </div>
</div>

CSS（无需修改原有代码） #

.accordion__title {
  background: gold;
}

.accordion__body {
  border-radius: 5px;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

JavaScript #

const accordion = document.querySelector('.accordion');
const items = accordion.querySelectorAll('.accordion__item');

items.forEach((item) => {
  const title = item.querySelector('.accordion__title');
  
  title.addEventListener('click', (e) => {
    const opened_item = accordion.querySelector('.is-open');
    
    toggle_item(item); 
    
    if (opened_item && opened_item !== item) {
      toggle_item(opened_item);
    }
  });
});

const toggle_item = (item) => {
  const body = item.querySelector('.accordion__body');
        
  if (item.classList.contains('is-open')) {
    body.removeAttribute('style');
    item.classList.remove('is-open');
  } else {
    body.style.height = body.scrollHeight + 'px';
    item.classList.add('is-open');
  }
}

// 初始化自动展开默认项逻辑
// 方式1：匹配HTML标识类（和上面HTML的改法对应）
const defaultOpenItem = accordion.querySelector('.accordion__item--default-open');
if (defaultOpenItem) toggle_item(defaultOpenItem);

/* 方式2：JS索引配置（和上面方式2的思路对应，注释掉方式1的代码即可启用）
const defaultOpenIndex = 0; // 改这里的数字切换默认展开项
const defaultOpenItem = items[defaultOpenIndex];
if (defaultOpenItem) toggle_item(defaultOpenItem);
*/

3. 逻辑说明 #

• 原有点击交互完全保留，仍支持点击标题展开、自动收起其他已展开项的逻辑
• 初始化时调用toggle_item会自动判断当前项状态，默认未添加is-open类的项会执行展开逻辑，设置正确高度并添加展开标识
• 若同时给多个菜单项加了默认标识类，只会展开第一个匹配的项，和原有手风琴同时仅展开一项的逻辑一致

注意事项 #

如果JS代码放在HTML头部（<head>标签内），需要将所有JS逻辑包裹在DOMContentLoaded事件回调中，避免DOM未加载完成导致元素选择失败：

document.addEventListener('DOMContentLoaded', () => {
  // 把上面的所有JS代码放到这里面执行
});

如果JS放在HTML底部（</body>标签之前），无需额外处理。

内容的提问来源于stack exchange，提问作者özgür kuş