Bootstrap 的 data-toggle="button" 仅切换 .active 类和 aria-pressed，不处理图标、文本或关联 DOM；图标不切换主因是 DOM 查询过早、类名错误、事件绑定对象错误或 CSS 权重被覆盖；推荐用原生 JS 手动监听 click 并同步更新状态。
Bootstrap 原生的 data-toggle="button" 仅支持「单个按钮切换激活态」，不自动管理图标、文本或关联 DOM 的显隐——想靠它实现“点击展开/收起侧边栏”或“切换图标+文字”，必须配合额外逻辑。
为什么 data-toggle="button" 看似生效但图标不切换
这个属性只负责给按钮加/删 .active 类，并同步设置 aria-pressed。它不会触发任何 JavaScript 回调，也不会操作其他元素。如果你写了 toggleClass("bi-chevron-down bi-chevron-up") 却没生效，大概率是：
- DOM 查询时机不对：按钮还没渲染完成就绑事件（尤其在 Vue/React 中）
- 图标类名写错，比如用了
fa-angle-down却没引入 Font Awesome - 用 jQuery 绑定时选中了父容器而非实际按钮元素，导致事件委托失效
- CSS 优先级覆盖了
.active样式，使视觉上“看不出变化”（见下一条）
.btn.active 样式被覆盖的典型表现与修复
Bootstrap v5 默认的 .btn-primary.active 权重是 .btn.btn-primary:active，很容易被后续 CSS 或框架内置规则压过。常见现象是：按钮点击后控制台能看到 active 类存在，但颜色/背景毫无变化。
解决方式不是强行提高 CSS 权重，而是复写更明确的选择器：
.btn.btn-primary.active,
.btn.btn-primary:active {
background-color: #0d6efd;
border-color: #0a58ca;
}
或者直接在按钮上用内联 style 覆盖（适合临时调试）：
<button class="btn btn-primary" style="--bs-btn-active-bg:#0d6efd;">提交</button>
用原生 JS 实现带图标切换的 Toggle Button（不依赖 jQuery）
避开插件限制最稳的方式：手动监听 click，自己维护状态并更新 DOM。以下是一个最小可行示例，适用于 Bootstrap 5 + 纯 HTML：
<button type="button" class="btn btn-outline-secondary" id="toggleSidebar"> <i class="bi bi-list" aria-hidden="true"></i> 菜单 </button> <div id="sidebar" class="collapse">...</div>
对应 JS：
const btn = document.getElementById('toggleSidebar');
const sidebar = document.getElementById('sidebar');
const icon = btn.querySelector('i');
btn.addEventListener('click', () => {
const isHidden = sidebar.classList.contains('show');
if (isHidden) {
sidebar.classList.remove('show');
icon.className = 'bi bi-list';
} else {
sidebar.classList.add('show');
icon.className = 'bi bi-x-lg';
}
});
注意点：
- 别用
toggle()直接切.collapse，它会和 Bootstrap 的 Collapse 插件冲突 - 图标切换用
className =而非classList.toggle()，避免残留旧类名 - 如果侧边栏用的是
data-bs-toggle="collapse"，请改用 JS 调用new bootstrap.Collapse(sidebar)控制，否则状态不同步
真正麻烦的从来不是“怎么让按钮变色”，而是状态同步——按钮、图标、关联区域、URL hash、甚至服务端 session，只要漏掉一环，用户就会觉得“点了一下，什么都没发生”。
