本文详解如何使用原生 javascript 和 css 实现表格中“点击右侧箭头展开详情行、同时旋转箭头为向下，再次点击则收起并复位”的交互效果，无需框架，代码轻量、结构清晰、易于维护。
本文详解如何使用原生 javascript 和 css 实现表格中“点击右侧箭头展开详情行、同时旋转箭头为向下，再次点击则收起并复位”的交互效果，无需框架，代码轻量、结构清晰、易于维护。
在构建新闻列表、订单摘要或 FAQ 表格等场景中，常需通过简洁的视觉线索（如箭头图标）控制额外内容的显隐。本教程将手把手带你用纯 HTML/CSS/JS 实现一个可逐行展开/收起的表格结构，并同步完成图标的旋转动画（▶ → ▼ → ▶），全程不依赖任何外部库，兼顾可读性与实用性。
✅ 核心实现逻辑
-
HTML 结构约定：每条主数据行（
）后紧跟一条 colspan="2" 的隐藏详情行（初始设 style="display: none;"）； - 触发元素定位：使用 ▶（Unicode 右向三角）作为可点击箭头，包裹在 中；
- JS 事件绑定：遍历所有 ，识别含 ▶ 的元素，为其添加点击监听；
- 状态切换：
- 切换 .arrow 类实现 90° 旋转（CSS transform: rotate(90deg)）；
- 切换 .display-none 类控制下一行（nextSibling）的 display: table-row 显隐。
? 完整示例代码
以下为精简优化后的完整可运行代码（已移除冗余内联样式，增强语义与可维护性）：
<!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; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } th { background: #000000; color: white; } .header-row { background: #CCCCCC; } .data-row { background: #FFFFFF; } .detail-row { background: #FFFFFF; display: none; } .detail-row.show { display: table-row !important; } .arrow { display: inline-block; cursor: pointer; color: #000000; transition: transform 0.2s ease; } .arrow.rotated { transform: rotate(90deg); } a { color: #0000FF; text-decoration: none; } </style> </head> <body bgcolor="#EEEEEE" link="#0000FF" vlink="#0000FF" alink="#0000FF"> <table> <tr> <th colspan="2"><b>Breaking News</b></th> </tr> <tr class="header-row"> <th>Date</th> <th>Subject</th> </tr> <!-- 第一组：主行 + 详情行 --> <tr class="data-row"> <td>Aug 22, 2023 / 10:00a</td> <td><span class="arrow">▶</span> <a href="#">Article Name Here</a></td> </tr> <tr class="detail-row"> <td colspan="2">Content I'd like displayed when the arrow is clicked<br>Supports multiple lines and basic HTML.</td> </tr> <!-- 第二组 --> <tr class="data-row"> <td>Aug 22, 2023 / 9:00a</td> <td><span class="arrow">▶</span> <a href="#">Another Article</a></td> </tr> <tr class="detail-row"> <td colspan="2">Additional details for the second item — collapsible on demand.</td> </tr> <!-- 第三组 --> <tr class="data-row"> <td>Aug 22, 2023 / 8:00a</td> <td><span class="arrow">▶</span> <a href="#">Final Article</a></td> </tr> <tr class="detail-row"> <td colspan="2">This row will appear only when its corresponding arrow is clicked.</td> </tr> </table> <script> // 获取所有箭头元素（更精准：只选带 arrow 类的 span） const arrows = document.querySelectorAll('.arrow'); arrows.forEach(arrow => { arrow.addEventListener('click', function() { // 切换旋转状态 this.classList.toggle('rotated'); // 查找紧随其后的 detail-row（即父tr → 父table → 下一个tr） const detailRow = this.closest('tr').nextElementSibling; if (detailRow && detailRow.classList.contains('detail-row')) { detailRow.classList.toggle('show'); } }); }); // 【可选】全局展开/收起按钮（例如：在表尾添加） // const allToggleBtn = document.querySelector('.all-toggle'); // if (allToggleBtn) { // allToggleBtn.addEventListener('click', () => { // arrows.forEach(arrow => { // arrow.classList.add('rotated'); // const detail = arrow.closest('tr').nextElementSibling; // if (detail && detail.classList.contains('detail-row')) { // detail.classList.add('show'); // } // }); // }); //} </script> </body> </html>⚠️ 注意事项与最佳实践
- DOM 定位健壮性：原答案中使用 parentNode.parentNode.parentNode.nextSibling 易受嵌套变化影响；本教程改用 closest('tr').nextElementSibling，语义清晰、容错更强；
- CSS 动画平滑性：添加 transition: transform 0.2s ease 让箭头旋转更自然；
- 可访问性提示：建议为箭头添加 aria-expanded="false" 并在 JS 中同步更新，提升屏幕阅读器支持；
- 避免内联样式：将 style="display: none;" 替换为类名控制（.detail-row + .show），利于主题切换与维护；
- 扩展性设计：若需「一键展开全部」，只需解注释底部 JS 片段，并在任意 上添加对应逻辑。
✅ 总结
该方案以最小学习成本达成专业级交互体验：仅需理解 querySelectorAll、closest()、classList.toggle() 三个核心 API，配合简单的 CSS 类控制，即可实现稳定、可复用的表格折叠组件。无论你是前端新手还是需要快速交付的开发者，这套模式都值得收藏进你的工具箱。
