vanilla js - classList.add 不工作，但 className 工作？

Question

我正在尝试重写/修改 WAI 教程文档（ https://www.w3.org/WAI/tutorials/menus/flyout/ ）中的导航示例。

我的问题只涉及下面的代码片段。 原始文档使用this.className ，我试图将其更改为this.classList.add ，但它什么也没做。 控制台中没有错误，并且控制台记录navPrimaryLi和mouseover事件都可以正常工作。

为什么我不能使用this.classList.add ？

let navPrimaryLi = document.querySelectorAll('#primary-nav li.menu-item-has-children');

Array.prototype.forEach.call(navPrimaryLi, function(el, i){
  el.addEventListener('mouseover', function(event){
    this.classList.add = 'open'; // does nothing
    // this.className = 'open'; // changes the class name to 'open'
  });
});

非常感谢！

Answer 1

尝试运行 add 而不是 assign

this.classList.add('open')