本文介绍如何使用 jquery 实现按钮点击时同步切换 bootstrap 图标（如 `glyphicon-collapse-down` ↔ `glyphicon-collapse-up`）和关联文本（“collapse views” ↔ “expand views”），并提供可复用、语义清晰、符合 dom 最佳实践的完整解决方案。
在前端交互开发中，折叠/展开按钮（Toggle Button）是常见需求。理想实现应满足：状态可读、逻辑清晰、DOM 结构稳定、便于扩展。直接使用 btn.html() 替换整个 HTML 容易丢失事件绑定、破坏结构语义，也不利于多实例复用。下面给出两种方案——先展示简洁可靠的推荐做法，再说明优化要点。
✅ 推荐方案：结构分离 + 类名切换 + 文本独立控制
将图标与文本分别包裹在独立 中，并通过 toggleClass() 和 text() 方法精准控制，避免重写整个 innerHTML：
<button type="button" onclick="toggleCollapse(this)" class="btn btn-default btn-sm"> <span class="icon-collapse glyphicon glyphicon-collapse-down"></span> <span class="text-collapse">Collapse Views</span> </button>
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) {
console.log('执行展开操作：显示隐藏内容...');
// 例如：$('.hidden-section').slideDown();
} else {
console.log('执行折叠操作：隐藏内容...');
// 例如：$('.hidden-section').slideUp();
}
}? 优势说明：✅ 结构稳定：不修改 DOM 结构，仅变更类名与文本内容，兼容事件委托与后续 JS 操作；✅ 语义清晰：.icon-collapse 与 .text-collapse 明确职责，便于 CSS 定制或 i18n 扩展；✅ 支持多实例：使用 class 而非 id，可批量初始化多个折叠按钮（如 $('.btn-toggle-collapse').each(...)）；✅ 状态驱动：以图标类名为唯一状态源（Single Source of Truth），避免文本字符串匹配带来的脆弱性（如拼写错误、空格差异）。
⚠️ 注意事项与避坑指南
- 避免 id 重复：原示例中 id="btnCollapse" 和 id="iconCollapse" 在多个按钮场景下会违反 HTML 唯一性规范，务必改用 class；
- 勿用 btn.html = ...：html 是方法而非属性，正确写法是 btn.html(...)；但更关键的是，html() 会完全替换子节点，导致图标元素被销毁重建，可能引发性能问题或丢失动态状态；
- 不要依赖文本内容判断状态：如 btn.text().includes('Collapse') 易受空格、换行、翻译影响，且耦合 UI 与逻辑；应优先使用数据属性（data-state="collapsed"）或 DOM 类名作为状态标识；
- 现代替代建议：Bootstrap 5+ 已弃用 Glyphicons，推荐迁移到 Bootstrap Icons 或 SVG 图标，并结合 data-bs-toggle="collapse" 原生支持实现无 JS 折叠（需配合 .collapse 元素）。
✅ 进阶：添加数据状态标记（增强可维护性）
为提升可测试性与调试体验，可在按钮上添加 data-state 属性同步管理状态：
<button type="button" onclick="toggleCollapse(this)"
class="btn btn-default btn-sm"
data-state="collapsed">
<span class="icon-collapse glyphicon glyphicon-collapse-down"></span>
<span class="text-collapse">Collapse Views</span>
</button>function toggleCollapse(el) {
const $btn = $(el);
const $icon = $btn.find('.icon-collapse');
const $text = $btn.find('.text-collapse');
const currentState = $btn.data('state'); // 'collapsed' or 'expanded'
if (currentState === 'collapsed') {
$icon.removeClass('glyphicon-collapse-down').addClass('glyphicon-collapse-up');
$text.text('Expand Views');
$btn.data('state', 'expanded');
} else {
$icon.removeClass('glyphicon-collapse-up').addClass('glyphicon-collapse-down');
$text.text('Collapse Views');
$btn.data('state', 'collapsed');
}
// 触发自定义事件，便于解耦业务逻辑
$btn.trigger('stateChanged', [currentState, $btn.data('state')]);
}这样既保持了逻辑内聚，又为组件化、单元测试和跨框架集成提供了良好基础。
总结：一个健壮的折叠按钮，核心在于状态可见、变更可控、结构稳定。优先使用类名切换与独立文本节点，辅以 data-* 属性管理状态，远胜于字符串匹配或 HTML 重写——这正是专业前端工程实践的体现。
