classList.toggle()切换container元素类名失效问题求助

按以下顺序排查即可定位问题：

• 首先是你测试用的console写法本身存在逻辑错误：当你取消注释console.log语句时，container.classList.toggle('active')一共执行了两次。第一次在函数开头执行，会给container加上active类；第二次在console.log语句里又执行了一遍，会把刚加上的active类直接移除，所以控制台永远只会打印第二次执行的返回值false，类也根本留不住。要打印toggle结果的正确写法是先存返回值再打印：

popupBtn.onclick = function() {
  const toggleResult = container.classList.toggle('active');
  console.log(toggleResult);
};

• 如果注释掉console.log后功能依然不生效，先在点击回调里加一句console.log(container)，确认你选中的元素是不是你写的那个包裹popupBtn的容器。document.querySelector('.container')只会匹配页面上第一个带container类的元素，如果你的页面公共布局、外层组件里提前存在其他带container类的元素，JS实际操作的就不是你预期的那个容器，自然看不到效果。
• 确认元素选中正确的话，再检查CSS代码：很多人会把绑定在container本身的选择器.container.active错写成.container .active（两个类中间多了空格），这种写法实际选中的是container内部带active类的子元素，就算JS成功给container加上了active类，对应的样式也不会生效，看起来就像toggle没起作用。
• 最后排查事件冒泡冲突：因为popupBtn是container的子元素，点击popupBtn的事件会向上冒泡到container及更上层元素。检查下你的代码里有没有给父级元素绑定点击事件、在回调里移除了container的active类，如果有的话，会出现active类刚加上就被删掉、功能完全不生效的情况。

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