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

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

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

问题分析

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

解决方案：分离 JavaScript 代码

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

步骤 1：创建 JavaScript 文件

Haiper

一个感知模型驱动的AI视频生成和重绘工具，提供文字转视频、图片动画化、视频重绘等功能

下载

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

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

确保在 HTML 文件的

步骤 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 结构存在：

    Foods
    

    
    

        
Home
        
About
        
Menu
        
Service
        
Contact
    

总结与注意事项

通过将 JavaScript 代码从 CSS 文件中分离出来，并确保正确引入到 HTML 文件中，可以有效地解决响应式导航栏菜单图标点击无反应的问题。

注意事项：

• 确保 JavaScript 文件路径正确。
• 检查 HTML 结构，确保 class 和 id 与 JavaScript 代码中的选择器匹配。
• 使用浏览器的开发者工具（F12）调试 JavaScript 代码，查看是否有错误或警告。
• 清除浏览器缓存，确保加载最新的代码。

  遵循这些步骤，您应该能够成功修复响应式导航栏菜单图标点击无反应的问题，并为用户提供更好的浏览体验。