本文旨在解决在使用 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 变量，这个元素通常是导航栏的
- 列表。
- 为 menu 元素添加一个点击事件监听器。当用户点击菜单图标时，会触发一个函数。
- 该函数会切换 navbar 元素的 active class。通过 CSS 样式，可以控制当 navbar 元素拥有 active class 时，导航栏的显示状态（例如，展开或折叠）。
- 监听窗口的滚动事件。当用户滚动页面时，会移除 navbar 元素的 active class，从而关闭导航栏。
步骤 2：在 HTML 文件中引入 JavaScript 文件
确保在 HTML 文件的
标签中正确引入 JavaScript 文件。 使用步骤 3：检查 CSS 媒体查询 在 CSS 文件的媒体查询中，确保只包含样式相关的代码，而不是 JavaScript 代码。 以下是一个示例 CSS 媒体查询，用于在屏幕尺寸小于 1140px 时显示菜单图标并调整导航栏的显示方式： 步骤 4：验证 HTML 结构 确保 HTML 结构正确，并且菜单图标和导航栏的 class 和 id 与 JavaScript 代码中使用的选择器匹配。 确保以下 HTML 结构存在： 通过将 JavaScript 代码从 CSS 文件中分离出来，并确保正确引入到 HTML 文件中，可以有效地解决响应式导航栏菜单图标点击无反应的问题。 注意事项： 遵循这些步骤，您应该能够成功修复响应式导航栏菜单图标点击无反应的问题，并为用户提供更好的浏览体验。
@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;
}
}总结与注意事项
