Question

我注意到Firefox中的切换类不起作用，我不确定原因。

var contactUs = document.querySelectorAll('.contact-us')[0];

var buttonExpand = document.querySelectorAll('a.write')[0];
buttonExpand.addEventListener('click', function(e) {
    contactUs.classList.toggle('js-expand-form');
    console.log('click');
},false);

当我点击Firefox中的a.write时，没有任何反应。它适用于Chrome和IE。

该问题与事件绑定和classList.toggle有关，因为console.log('click')在FF中不起作用，当我从控制台手动输入时：

document.querySelectorAll('.contact-us')[0].classList.toggle('js-expand-form')

它返回true或false但实际上没有任何变化 - 被检查元素不会获得新类。
更让我担心的是，Chrome控制台上粘贴的同一条线也没有生效，尽管它在正常情况下可以正常工作。

jQuery的等效jQuery('.contact-us').toggleClass('js-expand-form')适用于每个浏览器，包括粘贴到控制台。

请参阅the fiddle。

Answer 1

您在链接（a.write）上更改了课程。我猜这个链接会激活，页面重新加载和更改会被冲走。

尝试添加

e.preventDefault();

在toggle()命令之后的处理程序中。

Answer 2

神秘解决了。问题是由window.onload：

中包含的代码引起的

window.onload = function() {
var buttonExpand = document.querySelectorAll('a.write')[0];
buttonExpand.addEventListener('click', function(e) {
    console.log('click');
},false);
}

在将其转移到其他地方后，它开始在Firefox中运行：

var buttonExpand = document.querySelectorAll('a.write')[0];
buttonExpand.addEventListener('click', function(e) {
    console.log('click');
},false);

window.onload = function() {
}

不确定为什么 Firefox有问题。

classList.toggle在Firefox中不起作用

2 个答案: