JavaScript：点击锚点链接关闭下拉菜单并切换 Hamburger 状态

霞舞 2025-10-26 00:00:00 次阅读

本文旨在解决在单页应用或网页中，点击下拉菜单中的锚点链接时，菜单不自动关闭的问题。我们将通过 JavaScript 代码，监听锚点链接的点击事件，实现点击后关闭菜单并切换 Hamburger 图标状态，从而优化用户体验。

在网页开发中，下拉菜单是一种常见的导航方式。但当下拉菜单中包含指向页面内部锚点的链接时，用户点击这些链接后，菜单往往不会自动关闭，这会影响用户体验。本文将介绍如何使用 JavaScript 监听锚点链接的点击事件，实现点击后自动关闭菜单并切换 Hamburger 图标状态。

解决方案

核心思路是：

获取下拉菜单中所有锚点链接元素。
为每个锚点链接添加点击事件监听器。
在点击事件处理函数中，关闭下拉菜单并切换 Hamburger 图标的 change class。

以下是具体的代码实现：

var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--middle');
menu.style.display = "none";

hamburger.addEventListener('click', function() {
    this.classList.toggle("change");
    if (menu.style.display === "none") {
        menu.style.display = "block";
    } else {
        menu.style.display = "none";
    }
});

// 获取所有锚点链接
var anchors = document.querySelectorAll('.nav-contents > a');

// 遍历锚点链接，添加点击事件监听器
anchors.forEach(item => {
    item.addEventListener('click', () => {
        // 关闭菜单
        menu.style.display = "none";
        // 切换 Hamburger 图标状态
        hamburger.classList.toggle("change");
    });
});

代码解释：

document.querySelectorAll('.nav-contents > a'): 使用 querySelectorAll 方法获取所有 class 为 nav-contents 的元素下的所有 a 标签（锚点链接）。请根据你的 HTML 结构调整选择器。
anchors.forEach(item => { ... }): 遍历所有获取到的锚点链接。
item.addEventListener('click', () => { ... }): 为每个锚点链接添加点击事件监听器。
menu.style.display = "none";: 设置菜单的 display 属性为 none，从而关闭菜单。
hamburger.classList.toggle("change");: 切换 Hamburger 图标的 change class，实现 Hamburger 图标的切换效果。

HTML 结构示例：

About us

About Us

...

CSS 样式示例：

.navbar--middle {
    display: none;
    /* 其他样式 */
}

.hamburger {
    /* 其他样式 */
}

.change .icon1 {
    /* Hamburger 图标切换后的样式 */
}

.change .icon2 {
    /* Hamburger 图标切换后的样式 */
}

.change .icon3 {
    /* Hamburger 图标切换后的样式 */
}