Question

我正在为我的项目制作一个导航栏，该导航栏有几个下拉菜单，这是我的导航栏代码：

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

我想要dropdown-btn的onclick，它显示dropdown-content。我尝试了下面的代码，但在控制台中出现以下错误。

未捕获的TypeError：无法读取未定义的属性'classList'

这是我的JavaScript代码。 .dropdown-content不显示任何内容，active-dropdown中显示display:block

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

提前谢谢！

Answer 1

两个问题：

1）您的循环所使用的i超出了其范围

2）您正在使用新的() => {}胖箭头函数语法，该语法未将this绑定到该函数-因此您在编写{{1 }}。

尝试一下：

window

Answer 2

您的问题是您的箭头函数使用了不同的this.nextElementSibling-另外，请查看您对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'); }); }的范围：

this

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

2 个答案: