classListのundefinedについてお聞きしたいです！

現在下記のYouTubeを見ながらドロップダウンを書いているのですが、
classListがunfefinedになり理由がわからず、こちらにお聞きしました。
お手数ですが、どなたかお手すきの際にご教授を頂けませんでしょうか・・・？
よろしくお願い致します！

YouTubeのリンク
[https://www.youtube.com/watch?v=bZyRlzpRLsM]

下記はHTML

    <ul class="menu">

        <li>
            <a href="">親メニュー</a>
            <ul>
                <li><a href="">子メニュー</a></li>
                <li><a href="">子メニュー</a></li>
                <li><a href="">子メニュー</a></li>
            </ul>
        </li>

        <li>
            <a href="">親メニュー</a>
            <ul>
                <li><a href="">子メニュー</a></li>
                <li><a href="">子メニュー</a></li>
                <li><a href="">子メニュー</a></li>
            </ul>
        </li>

        <li>
            <a href="">親メニュー</a>
            <ul>
                <li><a href="">子メニュー</a></li>
                <li><a href="">子メニュー</a></li>
                <li><a href="">子メニュー</a></li>
            </ul>
        </li>
    </ul>
</main>
コード

下記はJS

const parentMenu = document.querySelectorAll(".menu > li > a");
for (let i = 0; i < parentMenu.length ; i ++){

    parentMenu[i].addEventListener('click', (e) => {
        e.preventDefault();
        this.nextElementSibling.classList.toggle("active");
    });
}

行動規範の内容に同意します

回答2件

ベストアンサー

アロー関数をやめるかターゲットを指定する。

js
1// this.nextElementSibling.classList.toggle("active");
2// ↓
3   e.target.nextElementSibling.classList.toggle("active");
4```**動くサンプル：**[https://jsfiddle.net/6cdr5b1m/](https://jsfiddle.net/6cdr5b1m/)
5
6---
7
8【Event.target - Web API | MDN】
9[https://developer.mozilla.org/ja/docs/Web/API/Event/target](https://developer.mozilla.org/ja/docs/Web/API/Event/target)
10
11【アロー関数 - JavaScript | MDN】
12[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#this を束縛しない](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this)