本文介绍如何用仅 4 行 jquery 代码替代冗长的原生 javascript，统一处理多个“see more/see less”切换按钮及关联的 copy 按钮显隐控制，大幅提升可维护性与可扩展性。
在构建信息密集型卡片布局（如产品详情、FAQ 或内容摘要）时，常需实现「默认折叠 + 点击展开 + 同步显示操作按钮」的交互模式。原始代码为每个 .SM 按钮单独绑定事件监听器，并通过索引（a[0], a[1], a[2]）硬编码操作对应 .Copy 按钮，导致逻辑重复、难以维护，且新增卡片需同步修改 JS —— 这明显违背 DRY（Don’t Repeat Yourself）原则。
使用 jQuery 可以优雅解决该问题。核心思路是：利用 DOM 层级关系（相邻兄弟元素）和事件委托思想，让单个事件处理器自动适配所有同类组件。
✅ 推荐简化方案（jQuery）：
$('.SM').click(function() {
$(this).next('.Copy').toggle(); // 切换 Copy 按钮显隐（无需手动设 display）
$(this).text((i, text) => text === 'See More' ? 'See Less' : 'See More');
});这段代码仅需两行核心逻辑：
- $(this).next('.Copy') 精准定位当前点击的 .SM 按钮的紧邻下一个兄弟元素（即同级 .Copy 按钮），避免依赖索引；
- .toggle() 自动切换显示/隐藏状态，比手动设置 display: none/block 更简洁可靠；
- .text() 回调函数根据当前文本动态返回新文案，语义清晰，无状态判断冗余。
? 注意事项：
-
必须引入 jQuery 库（推荐 CDN）：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- 确保 HTML 结构中 .Copy 按钮始终位于 .SM 按钮之后且为直接相邻兄弟节点（如示例中 <button class="SM">...</button><button class="Copy">...</button>），否则 next() 将失效；
- 若需支持「复制文本」功能，可在同一事件中追加逻辑（例如调用 navigator.clipboard.writeText()），无需为每个按钮单独写 alert()；
- 如需兼容无 jQuery 环境，也可用现代原生 JS 重构（document.querySelectorAll('.SM').forEach(...) + element.nextElementSibling），但 jQuery 方案在本场景下仍是最简解。
? 总结：从 30+ 行重复 JS 缩减至 4 行声明式代码，不仅显著降低出错概率，更使组件具备天然可复用性——新增 .box 无需改任何 JS，真正实现「写一次，处处生效」。
