本文介绍如何使用 jquery 实现按钮点击时动态切换图标（`glyphicon-collapse-down` ↔ `glyphicon-collapse-up`）和文本（“collapse views” ↔ “expand views”），同时提供可复用、语义清晰、符合 dom 规范的两种实现方案。
在构建交互式 UI（如折叠/展开面板）时，按钮的状态同步至关重要：图标方向需与文本语义一致，且逻辑应具备可维护性与可扩展性。直接操作 innerHTML 或 html() 容易导致子元素丢失（如原 图标被覆盖），而依赖 id 选择器则限制了组件复用性。以下是专业、健壮的两种实现方式：
✅ 推荐方案：语义化结构 + 类名切换（推荐用于生产环境）
将图标与文本分别包裹在独立 中，并通过 toggleClass() 和 text() 精准控制，避免 HTML 重写：
function toggleCollapse(btnEl) {
const $btn = $(btnEl);
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) {
console.log('执行展开逻辑：显示内容区域...');
// 例如：$('#content').slideDown();
} else {
console.log('执行折叠逻辑：隐藏内容区域...');
// 例如：$('#content').slideUp();
}
}优势说明： 使用 class 而非 id，支持同一页面多个折叠按钮； 图标与文本解耦，修改任意部分不影响另一部分； toggleClass() 原生支持双向切换，无需手动判断状态； 业务逻辑（如 slideDown()/slideUp()）可直接嵌入分支中，清晰可控。
⚠️ 备选方案：纯 HTML 替换（仅适用于简单场景）
若结构极简且无额外子元素，可采用字符串模板替换（不推荐多按钮或复杂交互）：
function toggleCollapseLegacy(btnEl) {
const $btn = $(btnEl);
const currentText = $btn.text().trim();
if (currentText.includes('Collapse')) {
$btn.html(' Expand Views');
} else {
$btn.html(' Collapse Views');
}
}注意：此方式会完全重写按钮内部 HTML，丢失事件绑定、自定义属性或动态生成的内容，且难以维护状态一致性。
? 关键注意事项
- 避免 ID 冗余：一个页面中 id 必须唯一。多个折叠按钮请统一使用 class="btn-collapse" 并通过 this 上下文精准定位；
- Bootstrap 4+ 已弃用 Glyphicons：若使用 Bootstrap 4/5，请改用 Bootstrap Icons 或 Font Awesome，并调整对应类名（如 bi bi-chevron-up）；
- 现代替代建议：在 Vue/React 项目中，应使用响应式数据驱动视图（如 :class + :text 绑定），而非手动 DOM 操作。
通过以上方法，你不仅能实现图标与文本的同步切换，更能构建出可复用、易测试、符合前端工程规范的交互组件。
