本文介绍一种轻量级、无需框架的纯 html+css+javascript 方案，用于在表格中点击右侧箭头图标（▶）时，动态显示或隐藏对应详情行，并同步将箭头旋转 90° 变为向下（▼），再次点击则恢复。代码简洁易懂，适合初学者快速集成。
本文介绍一种轻量级、无需框架的纯 html+css+javascript 方案，用于在表格中点击右侧箭头图标（▶）时，动态显示或隐藏对应详情行，并同步将箭头旋转 90° 变为向下（▼），再次点击则恢复。代码简洁易懂，适合初学者快速集成。
在构建新闻列表、FAQ 或可折叠数据表格时，常需实现「点击展开详情 + 图标状态同步」的交互效果。本文提供一套兼容性好、语义清晰、零依赖的原生实现方案，仅需少量 CSS 类与简明 JavaScript，即可完成行级内容的显隐控制与箭头方向切换。
✅ 核心原理说明
- 结构约定：每条可展开的标题行（如新闻条目）后紧跟一个 tr 元素作为其专属详情行，初始设为 <tr style="display: none;">；
- 触发标识：使用 Unicode 箭头字符 ▶（▶）作为默认折叠态图标，仅作用于该类可交互 <span>；
- DOM 定位：通过 this.parentNode.parentNode.parentNode.nextSibling 向上追溯至当前 <tr>，再取其下一个兄弟 <tr>（即详情行）；
- 状态切换：利用 classList.toggle() 控制 .arrow（旋转动画）与 .display-none（显隐样式）两个类。
? 完整实现代码
1. CSS 样式（推荐置于 <style> 或外部 CSS 文件中）
/* 箭头旋转动画：▶ → ▼ */
.arrow {
transform: rotate(90deg);
display: inline-block;
transition: transform 0.2s ease; /* 添加平滑过渡 */
}
/* 详情行显示规则（覆盖内联 display:none） */
.display-none {
display: table-row !important;
}2. JavaScript 逻辑（建议置于 </body> 前或 DOMContentLoaded 中）
<script>
// 获取所有 span 元素
const spans = document.querySelectorAll('span');
// 为每个 ▶ 图标绑定点击事件
spans.forEach(span => {
if (span.textContent.trim() === '▶') {
span.addEventListener('click', function () {
// 切换箭头旋转状态
this.classList.toggle('arrow');
// 切换下一行（详情行）的显示状态
const detailRow = this.closest('tr').nextElementSibling;
if (detailRow && detailRow.tagName === 'TR') {
detailRow.classList.toggle('display-none');
}
});
}
});
// 【进阶】一键展开/收起全部（可选）
const allOpenBtn = document.querySelector('.all-open');
if (allOpenBtn) {
allOpenBtn.addEventListener('click', function () {
spans.forEach(span => {
if (span.textContent.trim() === '▶') {
span.classList.toggle('arrow');
const detailRow = span.closest('tr').nextElementSibling;
if (detailRow && detailRow.tagName === 'TR') {
detailRow.classList.toggle('display-none');
}
}
});
});
}
</script>? 关键优化说明：
- 使用 closest('tr') 替代多层 parentNode 链式调用，更健壮、可读性更强；
- 添加 transition: transform 0.2s ease 实现箭头旋转的平滑动画；
- 检查 nextElementSibling 是否为 <tr>，避免因空文本节点导致定位错误；
- 使用 textContent.trim() 精确匹配，规避空格干扰。
3. HTML 结构示例（精简版，含「全部展开」按钮）
<table width="400" cellspacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC">
<tr>
<td colspan="2" bgcolor="#000000"><b style="color:#fff;">Breaking News</b></td>
</tr>
<tr bgcolor="#CCCCCC">
<td><b>Date</b></td>
<td><b>Subject</b></td>
</tr>
<!-- 条目 1 -->
<tr bgcolor="#FFFFFF">
<td>Aug 22, 2023 / 10:00a</td>
<td><span style="color:#000; cursor:pointer;">▶</span> <a href="#">Article Name Here</a></td>
</tr>
<tr style="display:none;">
<td colspan="2">Content I'd like displayed when the arrow is clicked</td>
</tr>
<!-- 条目 2 -->
<tr bgcolor="#FFFFFF">
<td>Aug 22, 2023 / 9:00a</td>
<td><span style="color:#000; cursor:pointer;">▶</span> <a href="#">Another Article</a></td>
</tr>
<tr style="display:none;">
<td colspan="2">More detailed content here...</td>
</tr>
<!-- 【全部展开】按钮（独立条目） -->
<tr bgcolor="#FFFFFF">
<td colspan="2">
<span style="color:#04f8f8; cursor:pointer;" class="all-open">▶</span>
<strong>All Open / Close</strong>
</td>
</tr>
<tr style="display:none;">
<td colspan="2">This row is ignored — serves only as visual placeholder</td>
</tr>
</table>⚠️ 注意事项与最佳实践
- 语义化建议：生产环境应避免 bgcolor、align 等过时属性，改用 CSS 类统一控制样式；
- 可访问性增强：为箭头添加 aria-expanded="false" 并在 JS 中同步更新，提升屏幕阅读器支持；
- 性能考虑：若数据量极大（>100 行），可改用事件委托（监听 <table>），避免重复绑定；
- 样式隔离：.display-none 的 !important 仅用于覆盖内联 display:none，如改用 CSS 类控制初始隐藏（如 .hidden { display: none; }），可移除此声明。
掌握此模式后，你不仅能快速实现新闻列表的折叠交互，还可轻松迁移至任务管理、产品规格表、多级评论等各类需要渐进式信息展示的场景。代码轻量、逻辑透明、扩展性强——是前端入门者迈向交互开发的理想起点。
