JavaScript实现导航栏菜单按钮点击功能失败求助

我正在学习JavaScript，尝试创建点击后可打开菜单的导航栏按钮，但经过多次尝试和代码修改，问题仍未解决。我的目标是点击右上角按钮时打开<ul>元素。

原始代码如下：

JavaScript #

document.getElementById("navBtn").onclick = function() {abrirNav()};

function abrirNav() {
    document.getElementByID("abrirMenu").classList.toggle("navAberta");
}

CSS #

.nav .nav-links{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffcc05;
    flex-direction: column;
    height: 100%;
    max-width: 280px;
    width: 100%;
    padding-top: 100px;
    row-gap: 25px;
    transition: all 0.4s linear;
}
/* Mostra o menu ao clicar no botão */
.navAberta{
    display: inherit;
}

HTML #

<nav class="nav">
    <div class="logo">AdoptaPet</div>
    <button id="navBtn"><i class="bi bi-list abrirNav"></i></button>
    <ul id="abrirMenu" class="nav-links">
        <i class="bi bi-x fecharNav"></i>
        <li><a href="">Home</a></li>
        <li><a href="">Sobre Nós</a></li>
        <li><a href="">Loja</a></li>
        <li><a href="">Cães para Adoção</a></li>
        <li><a href="">Detalhes do Cão</a></li>
        <li><a href="">Adotar</a></li>
        <li><a href="">Favoritos</a></li>
        <li><a href="">Contactos</a></li>
    </ul>
</nav>

导航栏效果参考：

1. 修复JavaScript拼写错误 #

getElementByID是拼写错误，正确方法名为getElementById（最后一个字母为小写d），这是导致无法获取菜单元素、无法切换类名的核心问题。

2. 提升CSS选择器优先级 #

.navAberta的选择器权重低于.nav .nav-links，即使添加类名，菜单也不会显示。需要修改CSS选择器提高权重：

.nav .nav-links.navAberta{
    display: flex;
}

用flex替代inherit更贴合你设置的flex-direction: column，确保布局逻辑一致。

3. 可选：添加关闭按钮功能 #

如果需要点击叉号关闭菜单，可在JavaScript中补充事件绑定：

document.getElementById("navBtn").onclick = toggleNav;
document.querySelector(".fecharNav").onclick = toggleNav;

function toggleNav() {
    document.getElementById("abrirMenu").classList.toggle("navAberta");
}

修正后的完整代码 #

JavaScript #

document.getElementById("navBtn").onclick = toggleNav;
document.querySelector(".fecharNav").onclick = toggleNav;

function toggleNav() {
    document.getElementById("abrirMenu").classList.toggle("navAberta");
}

CSS #

.nav .nav-links{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffcc05;
    flex-direction: column;
    height: 100%;
    max-width: 280px;
    width: 100%;
    padding-top: 100px;
    row-gap: 25px;
    transition: all 0.4s linear;
}
/* 提高选择器权重，确保样式生效 */
.nav .nav-links.navAberta{
    display: flex;
}
/* 可选：给关闭按钮添加样式，提升交互性 */
.fecharNav {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

HTML #

<nav class="nav">
    <div class="logo">AdoptaPet</div>
    <button id="navBtn"><i class="bi bi-list abrirNav"></i></button>
    <ul id="abrirMenu" class="nav-links">
        <i class="bi bi-x fecharNav"></i>
        <li><a href="">Home</a></li>
        <li><a href="">Sobre Nós</a></li>
        <li><a href="">Loja</a></li>
        <li><a href="">Cães para Adoção</a></li>
        <li><a href="">Detalhes do Cão</a></li>
        <li><a href="">Adotar</a></li>
        <li><a href="">Favoritos</a></li>
        <li><a href="">Contactos</a></li>
    </ul>
</nav>

内容的提问来源于stack exchange，提问作者Lohr027