本文详解如何使用原生 javascript 和 css 实现表格中每行“详情箭头”的交互功能：点击右侧 ▶ 图标可展开对应隐藏内容，同时箭头顺时针旋转 90° 变为 ▼；再次点击则收起内容并复位箭头。代码轻量、无需框架，兼容基础浏览器。
本文详解如何使用原生 javascript 和 css 实现表格中每行“详情箭头”的交互功能：点击右侧 ▶ 图标可展开对应隐藏内容，同时箭头顺时针旋转 90° 变为 ▼；再次点击则收起内容并复位箭头。代码轻量、无需框架，兼容基础浏览器。
在新闻列表、订单摘要或数据仪表盘等场景中，常需以紧凑表格形式展示条目，并通过可折叠区域承载详细信息。本教程提供一套简洁、可靠、零依赖的实现方案——仅用原生 HTML + CSS + JavaScript，即可完成「点击切换行内容显隐」与「箭头图标动态旋转」双重效果。
核心实现逻辑
关键在于建立箭头元素与目标内容行之间的 DOM 关系映射。本方案采用结构化 HTML 布局：每个可展开条目由两行组成——
- 触发行（Trigger Row）：含日期、标题及 ▶ 箭头（<span>▶</span>）；
- 内容行（Content Row）：<tr> 元素，初始设为 style="display: none;"，colspan="2" 占满整行，内含详情文本。
JavaScript 通过遍历所有 <span> 元素，精准定位含 ▶ 文本的箭头节点，为其绑定点击事件。点击时执行两项操作：
- 切换 .arrow 类，触发 CSS 旋转动画；
- 定位其父级 <td> → 父级 <tr> → 下一个兄弟 <tr>（即目标内容行），切换 .display-none 类控制显隐。
✅ 优势：不依赖 ID 或 data 属性，结构清晰、易于维护；✅ 兼容性：transform 和 display: table-row 在 IE9+ 均有效。
完整代码示例
以下为精简优化后的完整可运行代码（已移除冗余内联样式，增强可读性）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Breaking News - 折叠详情表</title>
<style>
/* 表格基础样式 */
table { width: 400px; margin: 20px auto; border-collapse: collapse; background: #CCCCCC; }
th, td { padding: 5px 10px; text-align: left; }
th { background: #000000; color: white; font-weight: bold; }
tr:nth-child(odd) { background: #FFFFFF; }
tr:nth-child(even) { background: #F9F9F9; }
/* 箭头旋转动画 */
.arrow {
display: inline-block;
transform: rotate(90deg);
transition: transform 0.2s ease;
}
/* 内容行显隐控制类 */
.content-row { display: none; }
.content-row.show { display: table-row !important; }
/* 箭头光标提示 */
.toggle-trigger { cursor: pointer; color: #000000; }
</style>
</head>
<body bgcolor="#EEEEEE">
<table>
<tr>
<th colspan="2">Breaking News</th>
</tr>
<tr>
<th>Date</th>
<th>Subject</th>
</tr>
<!-- 条目 1 -->
<tr>
<td>Aug 22, 2023 / 10:00a</td>
<td>
<span class="toggle-trigger">▶</span>
<a href="#">Article Name Here</a>
</td>
</tr>
<tr class="content-row">
<td colspan="2">
<p style="margin: 0; color: #333333;">Content I'd like displayed when the arrow is clicked<br>Additional details go here.</p>
</td>
</tr>
<!-- 条目 2 -->
<tr>
<td>Aug 22, 2023 / 9:00a</td>
<td>
<span class="toggle-trigger">▶</span>
<a href="#">Another Article</a>
</td>
</tr>
<tr class="content-row">
<td colspan="2">
<p style="margin: 0; color: #333333;">More detailed content for this item.<br>Supports multi-line text.</p>
</td>
</tr>
<!-- 条目 3 -->
<tr>
<td>Aug 22, 2023 / 8:00a</td>
<td>
<span class="toggle-trigger">▶</span>
<a href="#">Third Article</a>
</td>
</tr>
<tr class="content-row">
<td colspan="2">
<p style="margin: 0; color: #333333;">Final expanded content block.<br>Consistent styling across all rows.</p>
</td>
</tr>
</table>
<script>
// 获取所有触发箭头元素
const triggers = document.querySelectorAll('.toggle-trigger');
triggers.forEach(trigger => {
trigger.addEventListener('click', function() {
// 切换箭头旋转状态
this.classList.toggle('arrow');
// 定位并切换紧邻的下一行（内容行）
const contentRow = this.closest('tr').nextElementSibling;
if (contentRow && contentRow.classList.contains('content-row')) {
contentRow.classList.toggle('show');
}
});
});
</script>
</body>
</html>注意事项与进阶建议
- DOM 结构强约束：本方案依赖 trigger → tr → nextElementSibling 的层级关系。请确保每个 .toggle-trigger 都位于 <tr> 内，且其后紧跟一个 .content-row <tr>，否则 nextElementSibling 将失效。
- 避免内联 style="display:none"：推荐统一使用 CSS 类（如 .content-row { display: none; }）控制初始隐藏，便于后续 JS 统一管理。
- 无障碍访问（A11Y）增强：可为箭头添加 aria-expanded="false" 属性，并在 JS 中同步更新，配合屏幕阅读器提示状态变化。
- 批量操作扩展：如需「一键展开全部」，可新增一个按钮（如 <button id="toggle-all">展开所有</button>），并在 JS 中遍历所有触发器，统一调用 click() 或直接操作类名。
- 性能优化：对于超大表格（>100 行），建议使用事件委托（table.addEventListener('click', ...)）替代 forEach 绑定，减少内存占用。
掌握此模式后，你不仅能快速构建可折叠新闻列表，还可迁移至任务看板、FAQ 折叠面板、配置项分组等各类交互场景——核心思想始终如一：语义化结构 + 精准 DOM 导航 + 轻量状态切换。
