实现切换菜单为移动，但整个导航栏是可点击的，我想只是按钮被点击

<nav>
  <button id="menu-toggle">菜单</button>
  <ul id="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

/* 隐藏移动菜单 */
#menu {
  display: none;
}

/* 导航栏按钮样式 */
#menu-toggle {
  display: none; /* 在非移动设备上隐藏按钮 */
  cursor: pointer;
  /* 添加其他样式，如背景颜色、边框等 */
}

/* 移动设备上显示移动菜单 */
@media screen and (max-width: 768px) {
  #menu-toggle {
    display: block;
  }
  #menu {
    display: block;
    /* 添加其他样式，如背景颜色、边框等 */
  }
}

// 监听导航栏按钮的点击事件
document.getElementById("menu-toggle").addEventListener("click", function() {
  // 切换移动菜单的显示状态
  var menu = document.getElementById("menu");
  if (menu.style.display === "block") {
    menu.style.display = "none";
  } else {
    menu.style.display = "block";
  }
});