当我点击菜单按钮时，它并没有打开菜单

Question

const menuBtn = document.querySelector('#menuBtn')
const exitBtn = document.querySelector('#exitBtn');
const menu = document.getElementsByClassName('menu');

menuBtn.addEventListener('click' , () => {
menu.style.display = 'block'
})

.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}

.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
}

@media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.menu{
display: none
}
.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}

<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
</div>
<div class="exit">    
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>

</div>
</nav>

我该如何让它发挥作用？我测试了添加事件侦听器是否工作，它是否工作，但当涉及到在单击时显示菜单时，它不工作。你知道问题出在哪里吗？我不太擅长使用Javascript，所以任何帮助都将不胜感激。谢谢

Answer 1

document.getElementsByClassName('menu');不返回单个元素。它返回一个HTMLCollection。所以menu不是一个元素，menu.style.display = 'block也不会做你想做的事情

Answer 2

document.getElementsByClassName('menu')获取多个元素，所有元素都具有类'menu'。该函数返回一个HTMLCollection，但您可以将其视为列表。如果你想使用类，我建议使用：

var list = document.getElementsByClassName('menu')
for (var item of list) {
// Do Stuff Here
}

如果有多个菜单，请考虑将JQuery与.each(function)方法一起用于函数。