图标切换失效主因是依赖 toggleClass 切换 SVG/ 伪元素图标，正确做法是用 innerHTML 替换两套预存 SVG 字符串，并通过 dataset 或目标元素 class 同步状态。
点击按钮时图标不切换，toggleClass 没生效
常见原因是图标类名没写对，或者 dom 更新时机不对。bootstrap 5+ 默认用 svg 图标（如 bootstrap-icons），不是靠 css 类切换，得手动控制 innerhtml 或显式替换元素。
- 确认你用的是
bootstrap-icons：需提前引入 CSS 和 JS，或直接用 CDN 的<svg>标签 - 别指望只靠
btn<i class="bi bi-plus"></i>+toggleClass("bi-minus")能切换——bi-plus和bi-minus是两个独立类，不能互换，得整体替换<i>内容 - 如果用 Font Awesome，同理：
fa-plus和fa-minus也不能靠toggleClass切换，因为图标是伪元素生成的，类名切换不触发重绘
用 innerHTML 替换 SVG 图标最稳
Bootstrap 官方推荐 SVG 内联写法，好处是可控、无依赖、支持无障碍。点击切换就是替换整个 <svg> 字符串。
- 把图标 SVG 提前存成字符串变量，避免重复拼接
- 用
dataset记状态比查类名更可靠，比如data-state="collapsed" - 别在事件里反复
querySelector查图标容器，缓存好引用
const toggleBtn = document.querySelector('#my-toggle'); const iconEl = toggleBtn.querySelector('svg'); const plusSvg = '<svg class="bi"><use href="#bi-plus"/></svg>'; const minusSvg = '<svg class="bi"><use href="#bi-dash"/></svg>'; toggleBtn.addEventListener('click', () => {if (toggleBtn.dataset.state === 'expanded') {iconEl.innerHTML = plusSvg; toggleBtn.dataset.state = 'collapsed';} else {iconEl.innerHTML = minusSvg; toggleBtn.dataset.state = 'expanded';} }); data-bs-toggle="collapse" 自带图标切换难实现
Bootstrap 的原生折叠组件（collapse）不提供图标回调钩子，shown.bs.collapse 和 hidden.bs.collapse 事件触发时，DOM 可能还没完成重排，直接操作图标容易失败。
- 不要在
shown.bs.collapse里调iconEl.innerHTML = ……，加个setTimeout(() => {}, 0)延迟一帧更稳妥 - 如果用
data-bs-toggle="collapse"，建议放弃自动图标逻辑，改用手动绑定 click +collapse('show')/collapse('hide') - 注意：Bootstrap 5.3+ 的
collapse方法返回 Promise，但图标更新仍应放在事件回调里，而非 await 后
图标尺寸和垂直居中容易错位
SVG 默认 inline 行内对齐方式是 baseline，和文字混排时经常下沉，看起来像“没居中”。
- 给图标容器（比如
<span>或<i>）加align-middle类（Bootstrap 内置） - 或统一设
vertical-align: middle，避免用flex包裹按钮再单独对齐图标——会破坏按钮默认 padding 和行高 - SVG 自身宽高设为
1em，确保随字体缩放；别硬写width: 16px，否则响应式下失真
实际做下来，最省心的方式是：放弃所有“自动类名切换”，老老实实存两套 SVG 字符串，点一下换一套。复杂点在于状态同步——比如多个按钮控制同一个折叠区时，图标状态得和目标区的展开状态严格一致，光靠按钮自身 dataset 不够，得读 targetEl.classList.contains('show') 来决定初始图标。
