如何用JavaScript操作CSS~选择器元素？点击链接关闭汉堡菜单

纯CSS实现点击菜单链接关闭菜单 #

无需JavaScript，通过给菜单项添加关联checkbox的隐藏label，就能实现点击链接时自动关闭菜单：

首先补全导航的默认隐藏样式（你的原始CSS里缺少这部分），并添加过渡动画提升体验：

.side-menu {
    display: none;
}

.nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.side-menu:checked ~ nav {
    max-height: 100%;
}

然后修改HTML，给每个菜单li添加一个覆盖整个区域的label（关联到checkbox的id）：

<header class="header">
    <a href="#" class="logo"><img src="assets/img/brand.png" alt=""></a>
    <input class="side-menu" type="checkbox" id="side-menu" />
    <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
    <nav class="nav">
        <ul class="menu">
            <li>
                <label for="side-menu" class="menu-close"></label>
                <a href="#">Accueil</a>
            </li>
            <li>
                <label for="side-menu" class="menu-close"></label>
                <a href="#">Agenda</a>
            </li>
            <li>
                <label for="side-menu" class="menu-close"></label>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>
</header>

添加label的样式，让它覆盖整个菜单项区域：

.menu li {
    position: relative;
}

.menu-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

.menu li a {
    position: relative;
    z-index: 2; /* 确保链接的点击事件优先触发 */
}

原理：点击菜单链接时，鼠标同时触发了覆盖在下方的label，会自动取消checkbox的选中状态，菜单随之关闭，同时链接的跳转功能不受影响。

JavaScript实现方案 #

如果你更倾向用JS控制，直接操作checkbox的checked状态即可：

首先确保nav的默认样式正确（和纯CSS方案里的一致），然后添加以下JS代码：

// 获取checkbox元素
const sideMenu = document.getElementById('side-menu');
// 获取所有菜单链接
const menuLinks = document.querySelectorAll('.menu a');

// 给每个链接绑定点击事件
menuLinks.forEach(link => {
    link.addEventListener('click', () => {
        // 取消checkbox选中，菜单自动关闭
        sideMenu.checked = false;
    });
});

这种方式更直接，适合需要额外逻辑的场景。

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