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

Question

I'm trying to rewrite/modify a navigation example from the WAI tutorials documentation ( https://www.w3.org/WAI/tutorials/menus/flyout/ ).

My question only concerns the snippet of code below. The original docs use this.className which I'm trying to change to this.classList.add , but it does nothing at all. There are no errors in the console, and console logging both navPrimaryLi and the mouseover event works fine.

Why can I not use 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'
  });
});

Many thanks!

Answer 1

Try running add instead assign

this.classList.add('open')