移动端导航菜单CSS动画失效求助：JS切换无响应

云上老周

2026-7-27

修复响应式导航菜单的点击交互问题

下面是导致菜单无响应的核心问题及对应修复方案：

1. 修复JavaScript文件加载错误

HTML中脚本标签的属性拼写错误，导致点击逻辑完全未执行：

<!-- 错误写法 -->
<script scr="app.js"></script>

<!-- 正确写法 -->
<script src="app.js"></script>

scr应为src，这是菜单无任何反应的根本原因。

2. 修正全局样式语法错误

CSS全局样式的padding缺少单位，会引发布局异常：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* 补充单位，或根据需求设为10px */
  font-family: 'Nunito Sans', sans-serif;
}

3. 优化移动端导航容器布局

在@media screen and (max-width: 960px)媒体查询中，调整导航容器的对齐方式，避免logo与汉堡按钮重叠：

@media screen and (max-width: 960px) {
  .navbar__container {
    display: flex;
    justify-content: space-between; /* 替换原有的center */
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0 25px; /* 添加左右内边距，避免元素贴边 */
  }
  /* 其余样式保持不变 */
}