IE11下jQuery的toggleClass()与toggle()失效，求解决方案

嘿，我来帮你解决这个IE11的兼容坑！首先看你控制台抛出的SCRIPT1003: Expected ':'错误，这可是IE11的经典语法兼容问题——说明你的代码里用了IE11不认识的ES6+语法，而且这个错误出在app.js的10397行，会直接导致整个脚本执行中断，所以你的点击事件代码根本没机会运行，这才是核心问题。

接下来一步步排查修复：

1. 先把选择器的低级错误改了 #

你代码里的$("welcome-box")是错的！看你CSS里写的是.welcome-box类选择器，所以这里必须写成$(".welcome-box")——少了个点，浏览器根本找不到目标元素，这在现代浏览器里可能没直接报错，但IE11本来就敏感，加上前面的语法错误，直接就歇菜了。

2. 重点修复ES6语法问题 #

IE11完全不支持ES6的很多语法，你得去app.js的10397行看看具体代码，大概率是下面几种情况：

• 用了箭头函数：比如() => { ... }，要改成传统的function() { ... }
• 用了对象属性简写：比如{ username }要改成{ username: username }
• 用了模板字符串：比如${user.name}要改成普通字符串拼接"" + user.name
• 用了let/const：可以换成var，或者整个项目用Babel转译成ES5兼容代码

举个例子，如果10397行是箭头函数：

const handleClick = () => { /* 代码 */ }

改成IE能认的写法：

var handleClick = function() { /* 代码 */ }

3. 确认jQuery版本能兼容IE11 #

jQuery 3.x是支持IE11的，但如果你用的是太老的版本（比如1.x早期）也没问题，不过尽量用稳定版。要是不确定，直接引入兼容IE11的jQuery版本就行。

4. 测试修正后的代码 #

把选择器和语法问题都搞定后，再测试你的点击事件：

$("#welcome-done").on("click", function(){ 
  $(".welcome-box").toggleClass("hide"); 
});

或者用toggle()的版本：

$("#welcome-done").on("click", function(){ 
  $(".welcome-box").toggle(); 
});

额外调试小技巧 #

要是还不行，打开IE11的开发者工具：

• 直接跳到10397行，看看具体是哪段代码出了语法问题
• 在脚本开头加一句console.log("脚本跑起来啦")，确认脚本有没有正常执行到绑定点击事件的地方

内容的提问来源于stack exchange，提问作者user9760741