点击li元素时隐藏导航栏的实现问题求助（HTML/JS/CSS）

开发响应式导航时遇到问题：点击导航栏中的Home、Skills、Project、Contact等列表项后，移动端通过汉堡按钮展开的导航菜单无法自动隐藏，仅能通过再次点击汉堡按钮来收起菜单。

相关代码 #

HTML 代码

<div class="theme">
    <img class="darkThemeicon" src="assets/front/img/moon.png" alt="moon dark mode" id="icon">
</div>
<a href="#" class="hamburger" id="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</a>
<nav class="nav">
    <ul class="ul">
        <li class="li"><a class="list-link" href="#home">Home</a></li>
        <li class="li"><a class="list-link" href="#skills">Skills</a></li>
        <li class="li"><a class="list-link" href="#project">Project</a></li>
        <li class="li"><a class="list-link" href="#contact">Contact</a></li>
    </ul>
</nav>

JavaScript 代码

const hamburger = document.getElementById('hamburger');
hamburger.addEventListener('click', function (e) {
    const ul = document.querySelector('nav > ul');
    ul.classList.toggle('menu-slide');
    hamburger.classList.toggle('cross');
});

function hideDiv() {
    document.getElementsByClassName('ul')[0].style.display = "none";
}

解决方案 #

问题在于现有代码仅给汉堡按钮绑定了菜单切换事件，未给导航列表项添加隐藏菜单的逻辑，且hideDiv函数直接修改内联样式的方式，与汉堡按钮用CSS类控制显示的逻辑冲突。

修改后的代码如下：

const hamburger = document.getElementById('hamburger');
const navUl = document.querySelector('nav > ul');
const navLinks = document.querySelectorAll('.list-link');

// 汉堡按钮点击切换菜单状态
hamburger.addEventListener('click', function (e) {
    navUl.classList.toggle('menu-slide');
    hamburger.classList.toggle('cross');
});

// 给每个导航链接绑定点击事件，收起菜单
navLinks.forEach(link => {
    link.addEventListener('click', function() {
        // 检查菜单是否处于展开状态
        if (navUl.classList.contains('menu-slide')) {
            navUl.classList.remove('menu-slide');
            hamburger.classList.remove('cross');
        }
    });
});

说明 #

• 遍历所有导航链接（.list-link），给每个链接添加点击事件监听
• 点击链接时，先判断菜单是否展开（通过检查menu-slide类是否存在）
• 如果菜单展开，则移除menu-slide类收起菜单，同时移除汉堡按钮的cross类，恢复初始样式
• 这种方式和汉堡按钮的控制逻辑保持一致，避免直接修改内联样式引发的冲突

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