移动端导航栏菜单图标点击无响应问题求助

核心修复思路 #

你当前的问题是缺少点击交互的JavaScript逻辑，以及未实现屏幕变暗的遮罩层样式与触发逻辑。以下是完整的可运行修复代码：

完整代码实现 #

1. HTML 调整（新增遮罩层，给交互元素加标识） #

<nav class="navbar">
  <!-- 导航触发图标，添加ID用于JS选择 -->
  <div class="navbar-toggle" id="navbarToggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
  
  <!-- 核心导航菜单 -->
  <ul class="navbar-menu" id="navbarMenu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  
  <!-- 屏幕变暗遮罩层 -->
  <div class="overlay" id="overlay"></div>
</nav>

2. CSS 完善（适配大屏/小屏，添加过渡动画） #

/* 导航栏基础样式 */
.navbar {
  position: relative;
  background-color: #ffffff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 大屏设备（≥768px）样式 */
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
  .navbar-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
  }
  .navbar-menu a {
    text-decoration: none;
    color: #333333;
    font-size: 1rem;
  }
}

/* 小屏设备（<768px）样式 */
@media (max-width: 767px) {
  /* 汉堡图标样式 */
  .navbar-toggle {
    display: block;
    cursor: pointer;
  }
  .navbar-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s ease;
  }

  /* 默认隐藏导航菜单 */
  .navbar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background-color: #fff;
    list-style: none;
    margin: 0;
    padding: 2rem 1.5rem;
    transition: right 0.3s ease;
    z-index: 1001;
  }
  .navbar-menu li {
    margin: 1.5rem 0;
  }
  .navbar-menu a {
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;
  }

  /* 遮罩层样式 */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
    z-index: 1000;
  }

  /* 激活状态：显示菜单和遮罩 */
  .navbar-menu.active {
    right: 0;
  }
  .overlay.active {
    display: block;
  }
}

3. JavaScript 交互逻辑（处理点击事件） #

// 获取交互元素
const toggleBtn = document.getElementById('navbarToggle');
const navMenu = document.getElementById('navbarMenu');
const overlay = document.getElementById('overlay');

// 点击汉堡图标，切换菜单和遮罩状态
toggleBtn.addEventListener('click', () => {
  navMenu.classList.toggle('active');
  overlay.classList.toggle('active');
});

// 点击遮罩层，关闭菜单和遮罩
overlay.addEventListener('click', () => {
  navMenu.classList.remove('active');
  overlay.classList.remove('active');
});

// 点击菜单链接后自动关闭菜单（可选功能）
const menuLinks = navMenu.querySelectorAll('a');
menuLinks.forEach(link => {
  link.addEventListener('click', () => {
    navMenu.classList.remove('active');
    overlay.classList.remove('active');
  });
});

关键修复点 #

• 新增遮罩层元素，通过active类控制显示/隐藏，实现屏幕变暗效果
• 给交互元素添加ID，让JavaScript能精准获取并绑定点击事件
• 小屏菜单使用fixed定位+right属性过渡，实现滑入滑出的流畅动画
• 补充了点击遮罩、点击菜单链接关闭菜单的交互逻辑

内容的提问来源于stack exchange，提问作者user21744561