响应式导航栏点击无反应求助：JS功能异常排查

问题描述 #

开发HTML+CSS+JS响应式页面时，移动端布局适配正常，但点击菜单图标后，导航栏无法显示/隐藏。

错误点排查与修复 #

1. CSS选择器错误 #

原代码中.navbar .open的写法错误，该选择器会选中.navbar内部的.open元素，而我们需要的是给.navbar本身添加open类后触发样式，正确写法应为.navbar.open（无空格）。

2. CSS单位笔误 #

原代码中height: 29hv;是笔误，正确的视口高度单位是vh，需改为height: 29vh;。

3. 额外验证点 #

• 打开浏览器控制台，查看console.log(menu)和console.log(navbar)的输出，确认是否成功获取到DOM元素。如果输出null，说明选择器写错或JS执行时元素还未加载（可将JS放在</body>前，或用DOMContentLoaded事件包裹）。
• 确保已正确引入Boxicons库（因使用了bx bx-menu和bx-x类），否则菜单图标无法显示，点击事件自然无法触发。
• 检查header元素是否设置了position: relative;，否则绝对定位的.navbar会相对于整个文档定位，可能超出可视范围。

修正后的代码 #

CSS代码 #

#menu-icon
{
    font-size: 35px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}


/* 移动端布局设置 */
@media (max-width: 1280px)
{
    header
    {
        padding: 14px 2%;
        transition: .2s;
    }
    .navbar a
    {
        padding: 5px 0;
        margin: 0px 20px;
    }
}

@media (max-width: 1090px)
{
    #menu-icon
    {
        display: block;
    }   
    .navbar
    {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 270px;
        height: 29vh; /* 修正单位笔误 */
        background: var(--main-color);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all .50s ease;
    }

    .navbar.open /* 修正选择器 */
    {
        right: 2%;
    }
}

JS代码（无需修改，仅需验证元素获取） #

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

console.log(menu); // 验证menu-icon是否获取成功
console.log(navbar); // 验证navbar是否获取成功

menu.onclick = () => {
    menu.classList.toggle("bx-x");
    navbar.classList.toggle("open");
}

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