响应式导航菜单切换功能失效（JS）求助

问题根源 #

当前代码存在两个核心问题：

• JavaScript 操作的是 <nav> 元素（id="nav-menu"）的 display 属性，但移动端隐藏导航的 CSS 规则是给 <nav> 下的 <ul> 设置了 display: none，所以即使 <nav> 设为 block，内部列表依然处于隐藏状态。
• 直接通过 JS 修改行内样式会和 CSS 媒体查询规则产生优先级冲突，后续维护难度更高。

修复方案（推荐类切换方式） #

采用CSS 类切换控制显示状态，既符合样式与逻辑分离的原则，也能避免优先级冲突问题。

修改后的 JavaScript

function toggleMenu() {
  var navMenu = document.getElementById('nav-menu');    
  navMenu.classList.toggle('active');
}

修改后的 CSS

在原 CSS 基础上，添加 .active 类规则并调整媒体查询逻辑：

header {
    height: 128px;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    background: white;
}

header .nav-container {
    max-width: 100em;
    margin: auto;
    display: flex;
    justify-content: space-between;
    z-index: 45;
    padding: 0 1.5rem;
}

header .nav-container .logo {
    width: 14%;
    padding-top: 2.8rem;
}

header .nav-container p {
    display: none;
}

@media only screen and (max-width: 600px) {
    header .nav-container p {
        display: block;
    }
    /* 移动端默认隐藏ul */
    header .nav-container nav ul {
        display: none;
    }
    /* 给nav添加active类时，显示内部ul */
    header .nav-container nav.active ul {
        display: block;
    }
}

header .nav-container nav {
    padding-top: 2rem;
}

header .nav-container nav ul {
    display: block;
}

header .nav-container nav ul li {
    position: relative;
    display: inline-block;
}

header .nav-container nav ul li a {
    display: inline-block;
    transition: all 0.5s linear;
    text-decoration: none;
    padding: 16px 10px;
    color: #00458b;
}

header .nav-container nav ul li a:hover {
    color: #00458b;
}

header .nav-container nav ul li ul {
    display: none;
    background: white;
    position: absolute;
    top: 100%;
    width: 160px;
    padding: 0;
    z-index: 500;
}

header .nav-container nav ul li ul li,
            header .nav-container nav ul li ul a {
    width: 100%;
}

header .nav-container nav ul li:hover ul {
    display: block;
}

header .nav-container nav ul .menu-item-40 a {
    padding: 0;
}

HTML 无需修改

保持原有结构即可：

<header>
    <div class="nav-container">      
        <p id="menu" onclick="toggleMenu()"> Menu</p>
        <nav class="nav" id="nav-menu" role="navigation">
            <ul>
                <li class="nav-item">
                </li>
                <li class="nav-item">
                </li>
                <li class="nav-item"><a href="/">Services</a>
                    <ul class="sub-menu">
                        <li class="nav-item"><a href="/">Windows</a>
                        </li>
                        <li class="nav-item"><a href="/">Glass</a>
                        </li>
                        <li class="nav-item"><a href="/">Doors</a>
                        </li>
                        <li class="nav-item"><a href="/">Roofline</a>
                        </li>
                    </ul>
                </li>
                 <li class="nav-item"><a href="/">Our Work</a>
                </li>
                <li class="nav-item"><a href="/">Contact Us</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

快速临时修复（直接操作ul） #

如果不想调整 CSS 结构，也可以直接修改 JS 让它操作内部的 <ul> 元素：

function toggleMenu() {
  var menuList = document.querySelector('#nav-menu ul');    
  if(menuList.style.display === "block") { 
    menuList.style.display = "none";
  }
  else { 
    menuList.style.display = "block";
  }
}

注：该方式灵活性较差，后续维护成本更高，仅作为临时应急方案。

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