本文介绍如何使用 jquery 实现按钮点击后动态切换图标（如 `glyphicon-collapse-down` ↔ `glyphicon-collapse-up`）和关联文本（如“collapse views” ↔ “expand views”），并提供可复用、语义清晰、符合 dom 最佳实践的两种实现方案。
在构建交互式 UI 时，常需通过单个按钮控制内容的展开/收起状态，同时直观反馈当前操作意图——例如显示「Collapse Views」时图标朝下，点击后变为「Expand Views」且图标朝上。为实现这一效果，关键在于避免直接覆写整个 HTML 内容（如 btn.html(...)），而是精准更新图标类名与文本节点，确保结构稳定、逻辑清晰、易于维护。
✅ 推荐方案：语义化结构 + 类名切换（推荐）
将图标与文本分别包裹在独立 中，并利用 toggleClass() 和 text() 方法进行原子化更新：
function toggleCollapse(el) {
const $btn = $(el);
const $icon = $btn.find('.icon-collapse');
const $text = $btn.find('.text-collapse');
// 切换图标类：自动在 down / up 之间切换
$icon.toggleClass('glyphicon-collapse-down glyphicon-collapse-up');
// 根据当前图标状态同步更新文本
const isExpanded = $icon.hasClass('glyphicon-collapse-up');
$text.text(isExpanded ? 'Expand Views' : 'Collapse Views');
// ✅ 此处可插入实际业务逻辑（如显隐目标区域）
if (isExpanded) {
// 执行“展开”逻辑，例如：$('#target').slideDown();
} else {
// 执行“收起”逻辑，例如：$('#target').slideUp();
}
}优势说明： ✅ 使用 class 替代 id，支持页面中多个折叠按钮复用； ✅ 图标与文本分离，避免 html() 覆盖导致事件丢失或结构污染； ✅ toggleClass() 原生支持双向切换，无需手动判断字符串； ✅ 逻辑解耦，便于后续扩展（如添加 loading 状态、禁用按钮等）。
⚠️ 备选方案：纯 HTML 替换（不推荐用于复杂场景）
若结构简单且暂不考虑可维护性，也可通过条件拼接完整 HTML 字符串替换：
function toggleCollapseLegacy(el) {
const $btn = $(el);
const currentText = $btn.text().trim();
if (currentText.includes('Collapse')) {
$btn.html(' Expand Views');
} else {
$btn.html(' Collapse Views');
}
}注意：此方式会销毁并重建所有子节点，可能导致：
- 绑定在子元素上的事件监听器丢失；
- 表单控件（如 ）失去焦点或输入值；
- 不利于无障碍访问（ARIA 属性需重复设置）。
? 总结与最佳实践
- 永远优先使用 class 进行状态标记（如 .is-expanded），而非依赖文本内容判断（text().includes(...)），更健壮、更易测试；
- 避免 id 重复：多个折叠按钮应统一用 class="btn-collapse"，配合 this 参数精准定位；
- 图标切换建议用 CSS 类名控制，而非增删整个 class 字符串（addClass() + removeClass() 易出错）；
- 业务逻辑应与 UI 状态解耦：在 toggleCollapse() 中通过 isExpanded 变量触发对应行为，而非重复解析文本。
最终，一个健壮、可扩展的折叠按钮应是状态驱动的——你只需关心「当前是否展开」，UI 层自然同步呈现正确图标与文案。
