如何使用 Javascript 关闭带有关闭按钮的滚动大型菜单?

Question

我的 meganav 覆盖了桌面上的整个屏幕，我需要允许用户使用关闭按钮关闭菜单。我需要从没有 ID 的父 li 中删除一个过度状态。我用类名定位元素，但我得到了TypeError: Cannot read property 'remove' of undefined.检查器告诉我 HTML 集合包含该元素的所有类。

这是我试图在它的过度状态下瞄准的 li：

<li class="menu-6327 menuparent  menu-path-node-234366 first odd over">
<a href="/main/academic-programs" title="">Programs</a>
<ul class="sf-hidden" style="">

这是我尝试使用的javascript：

function closeMeganav() {
var element = document.getElementsByClassName("menu-671");
element.classList.remove("over");
}

关于我在这里做错了什么或更好的方法来实现这一目标的任何想法？

Answer 1

此错误的原因是getElementsByClassName()返回元素集合，而不是单个元素。

您当前将getElementsByClassName()的结果视为单个元素：

var element = document.getElementsByClassName("menu-671");
/* element is a HTMLCollection and has not concept of a classList */
/* element.classList.remove("over"); */

相反，请考虑使用querySelector()方法。这使您可以选择与指定的CSS选择器匹配的第一个元素(在您的情况下为.menu-671(：

function closeMeganav() {
/* Prefix with . to select elements with menu-671 class */
var element = document.querySelector(".menu-671");
if(element) {
/* If an element matches .menu-671 */
element.classList.remove("over");
}
}

Answer 2

document.getElementsByClassName返回节点列表。要从第一个元素中删除类，请使用element[0]

function closeMeganav() {
var element = document.getElementsByClassName("menu-671");
element[0].classList.remove("over");
}