JavaScript 实现响应式导航菜单的自动关闭-html教程-PHP中文网

JavaScript 实现响应式导航菜单的自动关闭

碧海醫心

发布： 2025-11-04 12:37:01

原创

966人浏览过

JavaScript 实现响应式导航菜单的自动关闭

本文将指导如何在响应式导航菜单中实现点击内部链接后自动关闭菜单的功能。通过为导航项添加统一的事件监听器，当用户选择任一导航链接时，系统将移除菜单的显示样式，从而提升用户体验，避免菜单遮挡内容或需要手动关闭的问题。

引言：优化响应式导航菜单的用户体验

在现代网页设计中，响应式导航菜单（通常以“汉堡”图标形式呈现）是移动设备上不可或缺的组件。它允许用户在有限的屏幕空间内访问完整的导航选项。然而，一个常见的用户体验问题是，当用户点击菜单中的某个链接并导航到页面指定区域后，菜单仍然保持打开状态，遮挡了页面内容，需要用户手动关闭。本文将详细介绍如何通过 JavaScript 优雅地解决这一问题，实现点击导航链接后菜单的自动关闭。

现有菜单结构与功能分析

为了更好地理解问题和解决方案，我们首先回顾一个典型的响应式导航菜单的实现。

HTML 结构： 菜单通常由一个触发按钮（如汉堡图标）和一个包含导航链接的列表组成。

<header>
    <div class="hamburger" id="hamburger"></div>
    <ul class="list" id="list">
        <li><a href="#home">HOME</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#menu">MENU</a></li>
    </ul>
</header>
<div class="contents">
    <h1 id="home">HOME</h1>
    <h1 id="services">SERVICES</h1>
    <h1 id="about">ABOUT</h1>
    <h1 id="menu">MENU</h1>
</div>

登录后复制

CSS 样式： 通过 CSS 控制菜单的初始隐藏状态，并定义一个 .show 类来使其可见。

.list {
    list-style-type: none;
    display: none; /* 默认隐藏 */
}
.list.show {
    position: fixed;
    display: block;
    inset: 0 0 0 0;
    z-index: 99;
    text-align: center;
    background-color: hsl(0 0% 0% / 0.6);
    padding: min(43vh, 20rem) 2rem;
}
/* 其他相关样式，如 .hamburger */
.hamburger {
    width: 50px;
    height: 50px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}

登录后复制

JavaScript 逻辑： 一个简单的 JavaScript 片段用于监听汉堡按钮的点击事件，从而切换导航列表的 show 类。

const button = document.getElementById("hamburger");
const list = document.getElementById("list");

button.addEventListener("click", () => {
    list.classList.toggle('show'); // 切换菜单显示/隐藏
});

登录后复制

核心问题：导航链接点击后菜单未自动关闭

在上述设置中，当用户点击汉堡按钮时，导航菜单会展开（添加 show 类）。然而，一旦用户点击了菜单中的任何一个导航链接（例如 HOME 或 ABOUT），页面会滚动到对应的锚点，但菜单本身仍然保持打开状态。这不仅占用了屏幕空间，也可能阻碍用户查看目标内容，从而影响整体的用户体验。

解决方案：为导航链接添加关闭事件监听器

为了解决这个问题，我们需要在用户点击导航链接时，主动触发菜单的关闭操作。

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

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

步骤一：优化 HTML 结构，为导航链接添加统一标识

首先，为所有导航链接 <a> 元素添加一个共享的类名，例如 nav-item。这使得我们能够方便地通过 JavaScript 选中所有这些链接。

<ul class="list" id="list">
    <li><a href="#home" class="nav-item">HOME</a></li>
    <li><a href="#services" class="nav-item">SERVICES</a></li>
    <li><a href="#about" class="nav-item">ABOUT</a></li>
    <li><a href="#menu" class="nav-item">MENU</a></li>
</ul>

登录后复制

步骤二：编写 JavaScript 逻辑，监听链接点击事件

接下来，修改 JavaScript 代码。在汉堡按钮的事件监听器之外，我们需要：

获取所有带有 nav-item 类的导航链接。
遍历这些链接，并为每个链接添加一个 click 事件监听器。
在每个链接的点击事件处理函数中，移除导航列表 list 上的 show 类。

const button = document.getElementById("hamburger");
const list = document.getElementById("list"); // 确保 list 元素已获取

button.addEventListener("click", () => {
    list.classList.toggle('show');
});

// 获取所有导航链接
const navItems = document.querySelectorAll('.nav-item');

// 为每个导航链接添加点击事件监听器
navItems.forEach((navItem) => {
    navItem.addEventListener('click', () => {
        list.classList.remove("show"); // 移除 'show' 类，关闭菜单
    });
});

登录后复制

通过以上修改，当用户点击任意导航链接时，list 元素上的 show 类会被立即移除，从而实现菜单的自动关闭。同时，浏览器会处理 <a> 标签的默认行为，使页面平滑滚动到对应的锚点。

完整示例代码

以下是整合了所有修改后的 HTML 和 JavaScript 片段，CSS 部分保持不变：

<header>
    <div class="hamburger" id="hamburger"></div>
    <ul class="list" id="list">
        <li><a href="#home" class="nav-item">HOME</a></li>
        <li><a href="#services" class="nav-item">SERVICES</a></li>
        <li><a href="#about" class="nav-item">ABOUT</a></li>
        <li><a href="#menu" class="nav-item">MENU</a></li>
    </ul>
</header>

<div class="contents">
    <h1 id="home">HOME</h1>
    <h1 id="services">SERVICES</h1>
    <h1 id="about">ABOUT</h1>
    <h1 id="menu">MENU</h1>
</div>

<script>
    const button = document.getElementById("hamburger");
    const list = document.getElementById("list");

    // 汉堡按钮点击事件：切换菜单显示/隐藏
    button.addEventListener("click", () => {
        list.classList.toggle('show');
    });

    // 获取所有导航链接
    const navItems = document.querySelectorAll('.nav-item');

    // 为每个导航链接添加点击事件：关闭菜单

登录后复制

以上就是JavaScript 实现响应式导航菜单的自动关闭的详细内容，更多请关注php中文网其它相关文章！