JavaScript - 变量未定义

Question

我试图找出这段代码出了什么问题:

function toggle_visibility() {
    var dropDownNav = document.getElementsByClassName("dropDownNav");
    if (dropDownNav.style.display == 'block') e.style.display = 'none';
    else dropDownNav.style.display = 'block';
}

HTML 是这样的:

 <a class="dropDownNavButton" href="#" onclick=
"toggle_visibility(dropDownNav)"><img alt="menu icon" src=
"img/navIcon.png"></a>

<ul class="dropDownNav">
    <li class="liWorks">
        <a href="works.html">Works</a>
    </li>

    <li class="liAbout">
        <a href="#">About</a>
    </li>

    <li class="liContact">
        <a href="contact.html">Contact</a>
    </li>

    <li class="liBlog">
        <a href="#">Blog</a>
    </li>
</ul>

然而 Chrome 告诉我: Uncaught ReferenceError :dropDownNav 未定义点击时

有人可以给我指路吗？

<小时/>

非常感谢您的快速解答!第一次使用 stackoverflow，绝对不是最后一次。它终于起作用了，我为数组添加了索引[0]，并删除了 onClick 函数上的 dropDownNav 。唯一的问题是，我希望当我第二次单击时 dropDownNav 显示返回到无。有什么线索吗？

Answer 1

document.getElementsByClassName() 返回与类名匹配的所有元素的 HTMLCollection(类似于数组)。 style 属性不是为 HTMLCollection 定义的，而是为 Element 定义的。使用

从数组中获取第一个元素

var dropDownNav = document.getElementsByClassName("dropDownNav")[0];