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')