HTML details name 怎样让手风琴只展开一个面板

我在整理一组帮助文档时，原本给每个折叠面板都写了点击脚本，结果很快遇到两个问题：一个面板打开后，另一个没有及时关闭；键盘操作和鼠标操作又走了两套逻辑。这个场景其实可以先交给原生 HTML 处理。

让多个

元素使用同一个 name 值，它们就会组成一个互斥组，同组最多保留一个打开项。下面的写法不需要为“关闭其他面板”再写一段 JavaScript。

结论：原生手风琴的关键不是给每个面板绑定点击事件，而是给同组的 details 设置相同的 name。需要记录状态时，再监听 toggle 事件。

先确认问题是分组，而不是脚本冲突

details 是一个原生 disclosure 元素，标题放在 summary 中，内容放在后面。它本身只有打开和关闭两种状态；如果每个元素没有共同的 name，它们就是互不影响的独立面板。

我通常先把现有代码缩成下面这个最小结构。如果三个面板都能同时打开，先不要急着检查 CSS，先看它们的 name 是否完全一致，包括大小写和空格。

账户设置
修改昵称、头像和登录邮箱。
通知设置
选择站内信和邮件提醒方式。
隐私设置
管理公开信息和数据使用选项。

这里的 name 不是表单字段名，也不是 JavaScript 选择器。它表达的是“这些 details 属于同一个 disclosure 组”。元素不要求相邻，只要分组值相同，就会参与同一互斥关系。

给同组 details 设置相同的 name

把 name="settings" 放到每个同组的 details 上即可。用户打开“通知设置”时，浏览器会自动关闭当前打开的“账户设置”，不需要手动查找兄弟节点，也不需要给每个标题注册点击处理器。

这个方案对键盘操作也更省心：summary 继续作为原生交互入口，用户可以通过聚焦和空格切换面板。相比把标题改成普通 div 再补 ARIA 和事件，原生元素少了一层状态同步。

如何修改密码？
进入账户安全页面后保存新密码。
  
忘记密码怎么办？
通过绑定邮箱或手机号重新设置。
  

如果页面上还有“订单帮助”一组，就使用另一个值，例如 name="order-help"。这样账户帮助和订单帮助可以各自保持一个打开项，互不干扰。

多个 open 时要看源码顺序

另一个容易忽略的情况是：服务端渲染或模板合并后，多个同组面板都带了 open。open 是布尔属性，只要属性存在就代表打开，写成 open="false" 仍然是打开状态。

同一组里如果初始就有多个 open，浏览器会按源码顺序处理，只有第一个打开项保留下来。不要把“属性值写成 false”当成关闭方法；需要关闭时，应当移除整个属性。

安装需要什么？
准备运行环境和项目依赖。
配置文件放在哪里？
放在应用约定的配置目录。

所以排查“刷新后总是打开错误面板”时，我会同时看模板输出顺序和 open 是否被重复注入。服务端默认项最好只输出一个 open，这样读者看到的初始状态更明确。

用 details[open] 做状态样式

互斥行为交给 name 后，视觉状态可以直接用属性选择器表达。这样样式跟 DOM 状态一致，不会因为脚本漏改一个 class 而出现“看起来打开、实际上关闭”的错位。

/* 用 open 属性区分展开面板，兼容不支持 :open 的环境 */
details {
  border: 1px solid #d9e1ea;
  border-radius: 8px;
  margin: 8px 0;
  padding: 0 12px;
}

/* summary 是原生交互标题，保留明显的可点击区域 */
summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
}

/* 打开后才增加内容区域的分隔和留白 */
details[open] {
  border-color: #2b7a78;
  background: #f3fbfa;
}

details[open] p {
  margin: 0 0 12px;
  color: #344054;
}

如果只需要样式，不要为了给打开项加颜色再绑定 JavaScript。属性选择器会随着原生状态自动更新，代码更短，维护时也更容易沿着元素本身排查。

需要记录状态时再监听 toggle

互斥本身不需要脚本，但业务可能要把用户最后打开的帮助项写入日志、更新地址栏或同步到应用状态。这时可以监听 toggle，读取当前元素的 open 状态。事件是在状态改变后派发的，适合做同步，而不是拿来重新实现互斥。

// 只记录当前打开的帮助项，互斥关闭仍由 details 的 name 负责
document.querySelectorAll('details[name="faq"]').forEach((panel) => {
  panel.addEventListener('toggle', () => {
    if (!panel.open) {
      return;
    }

    // 记录 summary 文本，实际项目也可以读取 data-key
    const label = panel.querySelector('summary')?.textContent?.trim() || '';
    console.log('当前帮助项：', label);
  });
});

这里没有写“关闭其他面板”的循环，因为那会和浏览器的原生分组规则重复。若确实要用脚本主动关闭一个面板，应当操作 panel.open = false 或移除 open 属性，而不是写 open="false"。

什么时候还需要 JavaScript

原生 name 适合“同组最多一个打开”的基础手风琴。如果需求是跨多个分组只允许一个面板、打开后要请求远程数据、把状态持久化到服务端，或者需要复杂的进入/退出动画，就需要在 toggle 上接业务逻辑。

我的取舍是先保留原生语义，再补最小脚本：面板互斥交给 name，样式读取 open，业务同步监听 toggle。这样即使脚本加载失败，基本的展开和收起仍然可用。

需求	优先方案	原因
同组只开一个	details name	无需手写互斥逻辑
默认打开某一项	只给一个元素加 open	避免源码顺序带来意外结果
根据展开状态换样式	details[open]	样式直接跟随元素状态
记录用户最后选择	toggle 事件	在状态变化后同步业务数据

最后按这几项复查

• 同一手风琴中的 details 是否使用完全一致的 name 值。
• 每个面板是否都有清晰的 summary，而不是用普通元素模拟标题。
• 模板是否误输出多个 open，以及是否把 open="false" 当成关闭。
• 只需要样式时是否可以使用 details[open]，只在业务同步时增加 toggle。

常见追问

不同位置的 details 能加入同一个手风琴吗？

可以。只要它们的 name 值相同，就可以参与同一组，不要求在 DOM 中紧挨着。

怎样让某个面板默认展开？

只给目标 details 加上 open 属性。同组不要同时输出多个默认打开项，否则源码靠前的项会优先。

为什么写了 open="false" 仍然展开？

因为 open 是布尔属性，属性存在就表示真。关闭时请移除属性，或在脚本中把 open 设为 false。