如何动态切换按钮图标与文本（折叠/展开状态）

本文介绍如何使用 jquery 实现按钮点击时动态切换图标（`glyphicon-collapse-down` ↔ `glyphicon-collapse-up`）和文本（“collapse views” ↔ “expand views”），同时提供可复用、语义清晰、符合 dom 规范的两种实现方案。

在构建交互式 UI（如折叠/展开面板）时，按钮的状态同步至关重要：图标方向需与文本语义一致，且逻辑应具备可维护性与可扩展性。直接操作 innerHTML 或 html() 容易导致子元素丢失（如原 图标被覆盖），而依赖 id 选择器则限制了组件复用性。以下是专业、健壮的两种实现方式：

✅ 推荐方案：语义化结构 + 类名切换（推荐用于生产环境）

将图标与文本分别包裹在独立 中，并通过 toggleClass() 和 text() 精准控制，避免 HTML 重写：

  
  Collapse Views

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 操作。

通过以上方法，你不仅能实现图标与文本的同步切换，更能构建出可复用、易测试、符合前端工程规范的交互组件。