如何修复Javascript中的下拉菜单？

Question

I am making a navbar for my project which has several dropdown menus, here is my navbar code:

<nav>
    <a class="logo" href="{% url 'home' %}">LOGO</a>

    <div class="navbar">
        <div class="dropdown">
            <a href="#" class="dropdown-btn" id="dropdown-btn">Teacher <i class="fa fa-caret-down"></i> </a>
            <div class="dropdown-content">
                <a href="{% url 'teacher:add-teacher' %}">Add Teacher</a>
                <a href="{% url 'teacher:list-teacher' %}">List Teacher</a>
            </div>
        </div>
        <div class="dropdown">
            <a href="#" class="dropdown-btn" id="dropdown-btn">Blog <i class="fa fa-caret-down"></i> </a>
            <div class="dropdown-content">
                <a href="{% url 'blog:blog-form' %}">Add Blog</a>
                <a href="#">Blog List</a>
            </div>
        </div>
    </div>
</nav>

I want that onclick of dropdown-btn, it shows dropdown-content. I tried below code, but it gives the following error in console.

Uncaught TypeError: Cannot read property 'classList' of undefined

and this is my javascript Code. .dropdown-content has a display of none and active-dropdown has display:block in it

let i, dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (i = 0; i < dropdownBtns.length; i++) {
    dropdownBtns[i].addEventListener('click', () => {
        let panel = this.nextElementSibling;
        panel.classList.toggle('active-dropdown');
    });
}

Thank you in advance!

Answer 1

Two issues:

1) Your loop was using an i that was outside of its scope

2) You were using the new () => {} fat arrow function syntax which doesn't bind this to the function - so you were referring to the window when you wrote this.nextElementSibling .

Try this:

var dropdownBtns = document.getElementsByClassName("dropdown-btn");

for (var i = 0; i < dropdownBtns.length; i++) {
    dropdownBtns[i].addEventListener('click', function () {
        let panel = this.nextElementSibling;
        panel.classList.toggle('active-dropdown');
    });
}

Answer 2

Your issue is that your arrow function was using a different this - also, look at your scoping for i :

var dropdownBtns = document.getElementsByClassName("dropdown-btn");

for (let i = 0; i < dropdownBtns.length; i++) {
    dropdownBtns[i].addEventListener('click', function() {
        let panel = this.nextElementSibling;
        panel.classList.toggle('active-dropdown');
    });
}