本文介绍一种符合现代 Web 开发规范的方法：使用 CSS 类选择器配合 JavaScript classList.toggle()，安全、高效地实现单按钮批量控制多个 <tr> 行的展开/收起，避免重复 ID 等常见错误。
本文介绍一种符合现代 web 开发规范的方法：使用 css 类选择器配合 javascript `classlist.toggle()`，安全、高效地实现单按钮批量控制多个 `
在构建产品对比表、配置详情页或可折叠数据表格时，常需通过一个按钮统一控制多行附加信息（如技术参数、兼容性说明等）的显示状态。传统做法中直接操作 id 会导致 DOM 唯一性冲突（HTML 规范禁止重复 id），而依赖内联 onclick 和 style.display 字符串判断则耦合度高、难以维护。
推荐采用语义化类名 + CSS 控制样式 + 事件委托式 JS 逻辑的组合方案，具体分为三步：
✅ 第一步：结构标记 —— 使用语义化 class 替代 id
为所有需统一控制的 <tr> 添加 class="hideable hidden"，其中：
- hideable 表示该行属于可切换组；
- hidden 表示初始隐藏状态（CSS 中定义其 display: none）。
<table>
<tbody>
<tr>
<td>基础型号</td>
<td>Pro-X1</td>
</tr>
<tr>
<td>价格</td>
<td>¥2,999</td>
</tr>
<!-- 这些是可折叠的详细规格行 -->
<tr class="hideable hidden">
<td>CPU</td>
<td>Intel Core i7-13700K</td>
</tr>
<tr class="hideable hidden">
<td>内存</td>
<td>32GB DDR5 5600MHz</td>
</tr>
<tr class="hideable hidden">
<td>存储</td>
<td>1TB PCIe 4.0 NVMe SSD</td>
</tr>
</tbody>
</table>
<button type="button" id="toggle">展开/收起全部规格 ▼</button>✅ 第二步：样式定义 —— 用 CSS 驱动显示逻辑
将显示/隐藏逻辑完全交由 CSS 控制，提升可维护性与性能：
/* 默认显示 hideable 行 */
.hideable {
display: table-row;
}
/* 当同时拥有 hideable + hidden 类时隐藏 */
.hideable.hidden {
display: none;
}
/* 可选：添加过渡效果（需配合 display 替代方案，如 max-height 或 visibility） */
/* 注意：display 不支持 CSS transition，如需动画建议改用 visibility + opacity 或 transform */⚠️ 注意：display 属性无法直接参与 CSS 过渡（transition），若需平滑展开/收起动画，可改用 visibility: hidden/visible + opacity 或 max-height 技巧（需预设高度），但对 <tr> 元素需谨慎处理布局影响。
Javascript Sdk下载用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
✅ 第三步：交互逻辑 —— 现代化事件监听
使用 addEventListener 绑定点击事件，并通过 querySelectorAll('.hideable') 批量获取目标元素，再调用 classList.toggle('hidden') 实现状态翻转：
document.getElementById('toggle')
?.addEventListener('click', () => {
document.querySelectorAll('.hideable')
.forEach(row => row.classList.toggle('hidden'));
});此写法具备以下优势：
- ✅ 无重复 ID 风险：完全避开 id 冲突问题；
- ✅ 关注点分离：HTML（结构）、CSS（表现）、JS（行为）各司其职；
- ✅ 可扩展性强：新增 <tr class="hideable hidden"> 即自动纳入控制范围；
- ✅ 可访问性友好：支持键盘触发（配合 button 语义化标签）；
- ✅ 健壮性高：使用可选链 ?. 防止 DOM 元素未加载时报错。
✅ 进阶提示：支持「展开/收起」文字动态切换
如需按钮文字随状态变化（如“展开”→“收起”），可增强 JS 逻辑：
const toggleBtn = document.getElementById('toggle');
const hideableRows = document.querySelectorAll('.hideable');
toggleBtn?.addEventListener('click', () => {
const isAnyHidden = Array.from(hideableRows).some(row => row.classList.contains('hidden'));
hideableRows.forEach(row => row.classList.toggle('hidden'));
toggleBtn.textContent = isAnyHidden ? '收起全部规格 ▲' : '展开全部规格 ▼';
});综上，摒弃内联脚本与非法重复 ID，拥抱语义类名与声明式样式，是构建可维护、可扩展、符合标准的交互表格的最佳实践。
