点击行展开详情需用HTML表格结构、CSS控制显隐及JavaScript交互实现：主行与详情行同属一个tbody，详情行初始隐藏，点击按钮切换其显示状态并旋转箭头。
用 HTML 表格实现“点击行展开详情”效果，核心是结合 HTML 结构、CSS 控制显示隐藏，以及 JavaScript 实现交互。纯 HTML 无法完成动态展开，必须配合 JS 和少量 CSS。
基础结构：用 tbody 和嵌套行实现展开区域
每一组“主行 + 展开行”放在同一个 <tbody> 中，避免破坏表格语义。主行用 <code><tr class="expandable">，展开行用 <code><tr class="detail-row hidden">（初始隐藏）：
<font size="2">
<pre class="brush:php;toolbar:false;"><table>
<thead>
<tr><th>姓名</th><th>部门</th><th>操作</th></tr>
</thead>
<tbody>
<tr class="expandable">
<td>张三</td>
<td>技术部</td>
<td><button class="toggle-btn">▶</button></td>
</tr>
<tr class="detail-row hidden">
<td colspan="3">邮箱：zhangsan@company.com｜入职时间：2022-03-15｜备注：全栈开发</td>
</tr>
</tbody>
<tbody>
<tr class="expandable">
<td>李四</td>
<td>设计部</td>
<td><button class="toggle-btn">▶</button></td>
</tr>
<tr class="detail-row hidden">
<td colspan="3">邮箱：lisi@company.com｜入职时间：2023-01-10｜备注：UI 主设计师</td>
</tr>
</tbody>
</table></pre>
</font>
<p>注意：<code>colspan="3" 确保详情横跨整行；多个 <tbody> 是合法且语义清晰的做法，比强行塞进同一 tbody 更易维护。
<h3>CSS 控制显隐与视觉反馈</h3>
<p>定义基础样式，让展开行默认不可见，同时给按钮添加状态提示：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<font size="2">
<pre class="brush:php;toolbar:false;">.detail-row.hidden { display: none; }
.detail-row { background-color: #f9f9f9; }
.toggle-btn {
border: none; background: none; font-size: 12px; cursor: pointer;
}
.toggle-btn.active { transform: rotate(90deg); }
</pre>
</font>
<p>关键点：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>用 <code>display: none 而非 visibility: hidden，避免占位影响表格布局
.toggle-btn.active 配合 JS 切换旋转箭头，提升交互感知JavaScript 绑定点击与状态切换
监听所有 toggle 按钮，找到紧邻的下一个 <tr.detail-row></tr.detail-row> 并切换显隐：
document.querySelectorAll('.toggle-btn').forEach(btn => {
btn.addEventListener('click', function() {
const detailRow = this.closest('tr').nextElementSibling;
if (detailRow && detailRow.classList.contains('detail-row')) {
detailRow.classList.toggle('hidden');
this.classList.toggle('active');
}
});
});
说明：
-
this.closest('tr')定位当前按钮所在主行 -
nextElementSibling直接获取下一行（即对应的详情行），无需查 class 或索引 - 检查
detailRow存在且类型正确，避免误操作
可选增强：支持收起其他已展开项（单选模式）
若希望每次只展开一行，可在点击时先收起所有已展开的详情行：
document.querySelectorAll('.toggle-btn').forEach(btn => {
btn.addEventListener('click', function() {
// 先收起所有
document.querySelectorAll('.detail-row:not(.hidden)').forEach(row => {
row.classList.add('hidden');
row.previousElementSibling.querySelector('.toggle-btn')?.classList.remove('active');
});
// 再展开当前
const detailRow = this.closest('tr').nextElementSibling;
if (detailRow && detailRow.classList.contains('detail-row')) {
detailRow.classList.remove('hidden');
this.classList.add('active');
}
});
});
这样能避免页面过长、信息过载，更适合数据量稍大的场景。
