修复响应式导航栏菜单图标点击无反应的问题-js教程-PHP中文网

修复响应式导航栏菜单图标点击无反应的问题

聖光之護

发布： 2025-10-18 09:10:24

原创

313人浏览过

修复响应式导航栏菜单图标点击无反应的问题

本文旨在解决在使用 HTML、CSS、Flexbox 和 JavaScript 创建的响应式导航栏中，菜单图标在屏幕缩小时点击无反应的问题。通过将 JavaScript 代码从 CSS 文件中分离出来，并确保正确引入到 HTML 文件中，可以有效地解决这个问题，保证导航栏在各种屏幕尺寸下的正常运作。

在构建响应式网站时，导航栏的正确显示和功能至关重要。当屏幕尺寸减小，导航栏通常会折叠成一个菜单图标（也称为汉堡菜单）。点击此图标应展开或折叠导航菜单。如果此功能不起作用，用户体验会受到严重影响。本文将详细介绍如何解决这个问题。

问题分析

问题通常出在 JavaScript 代码的处理方式上。常见的错误是将 JavaScript 代码直接嵌入到 CSS 文件的媒体查询中。虽然这在某些情况下可能有效，但通常会导致代码执行顺序和作用域的问题，最终导致菜单图标点击事件无法正确触发。

解决方案：分离 JavaScript 代码

最佳实践是将 JavaScript 代码与 CSS 代码分离。这样可以确保代码的可维护性，并避免潜在的冲突。

步骤 1：创建 JavaScript 文件

创建一个单独的 JavaScript 文件（例如 script.js），并将以下代码复制到其中：

let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");

menu.addEventListener("click", function () {
    navbar.classList.toggle("active");
});

window.onscroll = () => {
    navbar.classList.remove("active");
};

登录后复制

这段代码的功能是：

选取 HTML 中 id 为 menu-icon 的元素，赋值给 menu 变量，这个元素通常是汉堡菜单图标。
选取 HTML 中 class 为 navbar 的元素，赋值给 navbar 变量，这个元素通常是导航栏的 <ul> 列表。
为 menu 元素添加一个点击事件监听器。当用户点击菜单图标时，会触发一个函数。
该函数会切换 navbar 元素的 active class。通过 CSS 样式，可以控制当 navbar 元素拥有 active class 时，导航栏的显示状态（例如，展开或折叠）。
监听窗口的滚动事件。当用户滚动页面时，会移除 navbar 元素的 active class，从而关闭导航栏。

步骤 2：在 HTML 文件中引入 JavaScript 文件

确保在 HTML 文件的 <head> 标签中正确引入 JavaScript 文件。使用 <script> 标签，并确保 src 属性指向正确的 JavaScript 文件路径。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Website for Foodies!</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
</head>

登录后复制

步骤 3：检查 CSS 媒体查询

在 CSS 文件的媒体查询中，确保只包含样式相关的代码，而不是 JavaScript 代码。以下是一个示例 CSS 媒体查询，用于在屏幕尺寸小于 1140px 时显示菜单图标并调整导航栏的显示方式：

@media (max-width:1140px) {
    section {
        padding: 50px 8%;
    }

    #menu-icon {
        display: initial;
        color: var(--text-color);
    }

    header .navbar {
        position: absolute;
        top: -400px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        text-align: center;
        background: #2b2640;
        transition: .3s;
    }

    header .navbar.active {
        top: 70px;
    }

    .navbar a {
        padding: 1.5rem;
        display: block;
    }

    .Col {
        width: 50%;
        margin-bottom: 10px;
    }
}

登录后复制

步骤 4：验证 HTML 结构

确保 HTML 结构正确，并且菜单图标和导航栏的 class 和 id 与 JavaScript 代码中使用的选择器匹配。确保以下 HTML 结构存在：

<header>
    <a href="#" class="logo">Foods</a>
    <div class="bx bx-menu" id="menu-icon"></div>
    <!--class=" bx bx-menu" is responsible for icon from boxicon-->
    <ul class="navbar">
        <li><a href="#Home">Home</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#Menu">Menu</a></li>
        <li><a href="#Service">Service</a></li>
        <li><a href="#Contact">Contact</a></li>
    </ul>
</header>

登录后复制