JavaScript：点击锚点链接关闭下拉菜单并切换 Hamburger 状态-html教程-PHP中文网

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

霞舞

发布： 2025-10-26 09:23:00

原创

400人浏览过

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

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

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

解决方案

核心思路是：

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

以下是具体的代码实现：

立即学习“Java免费学习笔记（深入）”；

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");
    });
});

登录后复制

代码解释：

造点AI

夸克 · 造点AI

325

查看详情

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 结构示例：

<div class="navbar--middle navbar-hide" id="navbar--middle">
    <div style="height: 50px;"></div>
    <div class="nav-contents"><a class="about" href="#about-us">About us</a></div>
</div>

<div class="navbar--right">
    <div class="hamburger" id="hamburger">
        <div class="icon1"></div>
        <div class="icon2"></div>
        <div class="icon3"></div>
    </div>
</div>

<h2 id="about-us">About Us</h2>
<p>...</p>

登录后复制

CSS 样式示例：

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

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

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

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

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

登录后复制

注意事项

确保 JavaScript 代码在 HTML 元素加载完毕后执行，可以将代码放在 </body> 标签之前，或者使用 DOMContentLoaded 事件监听器。
根据实际的 HTML 结构调整 CSS 选择器，确保能够准确获取到锚点链接和 Hamburger 图标元素。
如果 Hamburger 图标的切换效果是通过其他方式实现的，需要相应地修改 hamburger.classList.toggle("change"); 这行代码。