本文详解如何使用原生 javascript 和 css 实现表格中每行“详情箭头”的交互功能：点击右侧 ▶ 图标可展开对应隐藏内容，同时箭头顺时针旋转 90° 变为 ▼；再次点击则收起内容并复位箭头。代码轻量、无需框架，兼容基础浏览器。

本文详解如何使用原生 javascript 和 css 实现表格中每行“详情箭头”的交互功能：点击右侧 ▶ 图标可展开对应隐藏内容，同时箭头顺时针旋转 90° 变为 ▼；再次点击则收起内容并复位箭头。代码轻量、无需框架，兼容基础浏览器。

在新闻列表、订单摘要或数据仪表盘等场景中，常需以紧凑表格形式展示条目，并通过可折叠区域承载详细信息。本教程提供一套简洁、可靠、零依赖的实现方案——仅用原生 HTML + CSS + JavaScript，即可完成「点击切换行内容显隐」与「箭头图标动态旋转」双重效果。

核心实现逻辑

关键在于建立箭头元素与目标内容行之间的 DOM 关系映射。本方案采用结构化 HTML 布局：每个可展开条目由两行组成——

• 触发行（Trigger Row）：含日期、标题及 ▶ 箭头（▶）；
• 内容行（Content Row）： 元素，初始设为 style="display: none;"，colspan="2" 占满整行，内含详情文本。

  JavaScript 通过遍历所有 元素，精准定位含 ▶ 文本的箭头节点，为其绑定点击事件。点击时执行两项操作：

  1. 切换 .arrow 类，触发 CSS 旋转动画；
  2. 定位其父级 → 父级 → 下一个兄弟 （即目标内容行），切换 .display-none 类控制显隐。

     ✅ 优势：不依赖 ID 或 data 属性，结构清晰、易于维护；✅ 兼容性：transform 和 display: table-row 在 IE9+ 均有效。

     完整代码示例

     以下为精简优化后的完整可运行代码（已移除冗余内联样式，增强可读性）：

     
     
       <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>

     Breaking News
     Date	Subject
     Aug 22, 2023 / 10:00a	▶ Article Name Here
     Content I'd like displayed when the arrow is clicked Additional details go here.
     Aug 22, 2023 / 9:00a	▶ Another Article
     More detailed content for this item. Supports multi-line text.
     Aug 22, 2023 / 8:00a	▶ Third Article
     Final expanded content block. Consistent styling across all rows.

     <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>

     注意事项与进阶建议

     • DOM 结构强约束：本方案依赖 trigger → tr → nextElementSibling 的层级关系。请确保每个 .toggle-trigger 都位于 内，且其后紧跟一个 .content-row ，否则 nextElementSibling 将失效。
     • 避免内联 style="display:none"：推荐统一使用 CSS 类（如 .content-row { display: none; }）控制初始隐藏，便于后续 JS 统一管理。
     • 无障碍访问（A11Y）增强：可为箭头添加 aria-expanded="false" 属性，并在 JS 中同步更新，配合屏幕阅读器提示状态变化。
     • 批量操作扩展：如需「一键展开全部」，可新增一个按钮（如 展开所有），并在 JS 中遍历所有触发器，统一调用 click() 或直接操作类名。
     • 性能优化：对于超大表格（>100 行），建议使用事件委托（table.addEventListener('click', ...)）替代 forEach 绑定，减少内存占用。

     掌握此模式后，你不仅能快速构建可折叠新闻列表，还可迁移至任务看板、FAQ 折叠面板、配置项分组等各类交互场景——核心思想始终如一：语义化结构 + 精准 DOM 导航 + 轻量状态切换。