如何实现summary-details结构展开后将summary文本切换为Collapse？

开发者阿泽

2026-4-28

实现summary文本随展开/收起切换

当然可以实现这个需求！这是个很实用的小交互，用几行JavaScript就能轻松搞定，不需要依赖任何框架。下面是具体的实现方法：

基础实现（单个details组件）

首先我们先写好基础的HTML结构，给summary加个标识方便后续操作：

<details id="toggleDetails">
  <summary id="toggleSummary">Details</summary>
  一些细微到容易被忽略的内容。
</details>

然后添加JavaScript逻辑，监听details的toggle事件，根据展开状态切换文本：

// 获取元素
const details = document.getElementById('toggleDetails');
const summary = document.getElementById('toggleSummary');

// 监听切换事件
details.addEventListener('toggle', () => {
  // 根据details的open属性判断状态
  summary.textContent = details.open ? 'Collapse' : 'Details';
});

这样就完成了核心功能：点击展开时summary文本变成"Collapse"，点击收起时又变回"Details"。

批量处理多个details组件

如果你页面上有多个这类组件，不用一个个写事件监听，用类选择器批量处理更高效：

<details class="toggle-group">
  <summary class="toggle-text">Details</summary>
  第一个组件的详情内容。
</details>

<details class="toggle-group">
  <summary class="toggle-text">Details</summary>
  第二个组件的详情内容。
</details>

// 获取所有目标组件
const detailGroups = document.querySelectorAll('.toggle-group');

// 循环绑定事件
detailGroups.forEach(group => {
  const summary = group.querySelector('.toggle-text');
  group.addEventListener('toggle', () => {
    summary.textContent = group.open ? 'Collapse' : 'Details';
  });
});