IE11不支持classList.toggle()的第二个force参数，需手动判断force值并调用add()/remove()；应通过运行时探测而非UA判断兼容性，Babel等构建工具无法自动修复该DOM行为差异。
classList.toggle()第二个参数在IE11中根本不起作用
IE11 的 classList.toggle() 只支持单参数形式，传入第二个参数（布尔值）不会报错，但会被静默忽略——也就是说，el.classList.toggle('active', false) 和 el.classList.toggle('active', true) 在 IE11 中行为完全一致，都等价于 el.classList.toggle('active')。
这是 IE11 原生实现的缺陷，不是 bug 也不是兼容性“警告”，而是标准支持不完整：它只实现了 DOM Token List 的早期草案接口，尚未支持后来加入的 force 参数（即第二个布尔参数）。
如何安全地在 IE11 中模拟 toggle(className, force)
你需要手动判断并调用 add() 或 remove()，不能依赖原生第二个参数。常见写法如下：
function toggleClass(el, className, force) {
if (typeof force === 'boolean') {
if (force) {
el.classList.add(className);
} else {
el.classList.remove(className);
}
} else {
el.classList.toggle(className);
}
}
注意点：
-
force为false时，必须显式调用remove()，不能省略 - 不要用
!!force强转再判断，避免0、''、null等假值误触发remove() - 如果项目已引入
core-js或web-polyfill，确认其是否覆盖了DOMTokenList.prototype.toggle—— 多数老版本 polyfill 也不修复该参数，需实测
检查运行时环境是否支持 toggle 第二个参数
不能只靠 UA 判断 IE，因为 Edge 12–18 也存在同样限制。最稳妥的方式是运行时探测：
const supportsToggleForce = (() => {
const div = document.createElement('div');
try {
div.classList.toggle('a', false);
return div.classList.contains('a') === false;
} catch {
return false;
}
})();
这个探测逻辑的关键在于：toggle('a', false) 应该确保不添加 a；如果执行后仍包含，说明不支持 force 参数。IE11 和旧 Edge 都会返回 false。
为什么 Babel / webpack 不会帮你处理这个问题
这是一个运行时 DOM API 行为差异，不是语法或 ES 特性，因此：
-
@babel/preset-env的targets设置对它完全无效 - TypeScript 编译也不校验 DOM 方法的参数兼容性，
toggle(className, boolean)在 TS 类型检查中永远合法 - ESLint、JSDoc 注释更不会预警——它看起来天衣无缝，直到你在 IE11 里点按钮没反应
真正容易被忽略的是：这个坑往往藏在封装好的工具函数或 UI 组件内部，表面看逻辑自洽，实则跨浏览器失效。上线前务必在真实 IE11 环境中验证带 force 参数的 class 切换路径。
