移动端Navbar点击无法展开问题排查求助

核心问题定位 #

1. 点击事件绑定错误：菜单按钮的onClick属性直接执行了toggleMenu()，导致组件初始化时就触发状态切换，而非点击按钮时触发。正确写法应为传递函数引用，而非立即调用。
2. 移动端菜单内容不匹配：当前移动端展开的菜单是注册/登录链接，与桌面端的用户中心菜单（Perfil、Historial等）不一致，属于逻辑错误。
3. 层级与定位优化：移动端菜单的fixed定位可保留，但需明确设置top:0和left:0确保全屏覆盖。

修复步骤 #

• 将按钮的onClick={toggleMenu()}修改为onClick={toggleMenu}
• 同步移动端菜单内容与桌面端的用户中心链接
• 为移动端菜单的链接添加点击后收起菜单的逻辑，提升体验

修复后的完整代码 #

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  return (
    <nav className="bg-white shadow-xl relative">
      <div className="max-w-6xl flex flex-wrap items-center justify-between mx-auto p-2">
        <Link
          href="/dashboard"
          className="flex items-center space-x-3 rtl:space-x-reverse"
        >
          <Image src="/logo.svg" alt="logo" width={120} height={45} />
          <span className="text-lg text-[#00478a] font-bold hover:text-gray-800">
            Mi Cuenta
          </span>
        </Link>
        {/* 桌面端菜单 */}
        <div className="hidden w-full lg:block lg:w-auto">
          <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white">
            <li>
              <Link
                href="/dashboard/perfil"
                className="flex text-sm text-[#00478a] font-bold hover:text-gray-800"
                aria-current="page"
              >
                <Image
                  src="/user-group-solid.svg"
                  alt="perfil"
                  width={14}
                  height={14}
                  className="mr-2"
                />
                Perfil
              </Link>
            </li>
            <li>
              <Link
                href="/dashboard/historial"
                className="flex text-sm text-[#00478a] font-bold hover:text-gray-800"
              >
                <Image
                  src="/shopping-cart-solid.svg"
                  alt="perfil"
                  width={14}
                  height={14}
                  className="mr-2"
                />
                Historial
              </Link>
            </li>
            <li>
              <Link
                href="/dashboard/contacto"
                className="flex text-sm text-[#00478a] font-bold hover:text-gray-800"
              >
                <Image
                  src="/comments-solid.svg"
                  alt="perfil"
                  width={14}
                  height={14}
                  className="mr-2"
                />
                Contacto
              </Link>
            </li>
            <li>
              <Link
                href="/terms_cond.pdf"
                target="_blank"
                className="flex text-sm text-[#00478a] font-bold hover:text-gray-800"
              >
                <Image
                  src="/file-contract-solid.svg"
                  alt="perfil"
                  width={10}
                  height={10}
                  className="mr-2"
                />
                Términos y Condiciones
              </Link>
            </li>
            <li>
              <Link
                href="/dashboard/salir"
                className="flex text-sm text-[#00478a] font-bold hover:text-gray-800"
              >
                <Image
                  src="/right-from-bracket-solid.svg"
                  alt="perfil"
                  width={14}
                  height={14}
                  className="mr-2"
                />
                Salir
              </Link>
            </li>
          </ul>
        </div>
        {/* 移动端菜单按钮 */}
        <button
          className="menu-button inline-flex items-center p-2 justify-center text-4xl text-[#046cb3] md:hidden"
          onClick={toggleMenu}
          aria-label={isMenuOpen ? "Cerrar menú" : "Abrir menú"}
        >
          {isMenuOpen ? "✖" : "☰"}
        </button>
        {/* 移动端展开菜单 */}
        {isMenuOpen && (
          <div className="lg:hidden font-semibold bg-slate-200 w-screen h-screen flex flex-col items-center pt-20" style={{ zIndex: 999, position: 'fixed', top: 0, left: 0 }}>
            <Link
              href="/dashboard/perfil"
              className="block text-[#00478a] text-xl hover:text-gray-800 py-4 w-full max-w-xs text-center"
              onClick={toggleMenu}
            >
              <div className="flex items-center justify-center">
                <Image
                  src="/user-group-solid.svg"
                  alt="perfil"
                  width={18}
                  height={18}
                  className="mr-2"
                />
                Perfil
              </div>
            </Link>
            <Link
              href="/dashboard/historial"
              className="block text-[#00478a] text-xl hover:text-gray-800 py-4 w-full max-w-xs text-center"
              onClick={toggleMenu}
            >
              <div className="flex items-center justify-center">
                <Image
                  src="/shopping-cart-solid.svg"
                  alt="historial"
                  width={18}
                  height={18}
                  className="mr-2"
                />
                Historial
              </div>
            </Link>
            <Link
              href="/dashboard/contacto"
              className="block text-[#00478a] text-xl hover:text-gray-800 py-4 w-full max-w-xs text-center"
              onClick={toggleMenu}
            >
              <div className="flex items-center justify-center">
                <Image
                  src="/comments-solid.svg"
                  alt="contacto"
                  width={18}
                  height={18}
                  className="mr-2"
                />
                Contacto
              </div>
            </Link>
            <Link
              href="/terms_cond.pdf"
              target="_blank"
              className="block text-[#00478a] text-xl hover:text-gray-800 py-4 w-full max-w-xs text-center"
              onClick={toggleMenu}
            >
              <div className="flex items-center justify-center">
                <Image
                  src="/file-contract-solid.svg"
                  alt="términos"
                  width={14}
                  height={14}
                  className="mr-2"
                />
                Términos y Condiciones
              </div>
            </Link>
            <Link
              href="/dashboard/salir"
              className="block text-[#00478a] text-xl hover:text-gray-800 py-4 w-full max-w-xs text-center"
              onClick={toggleMenu}
            >
              <div className="flex items-center justify-center">
                <Image
                  src="/right-from-bracket-solid.svg"
                  alt="salir"
                  width={18}
                  height={18}
                  className="mr-2"
                />
                Salir
              </div>
            </Link>
          </div>
        )}
      </div>
    </nav>
  );
};

export default Navbar;

额外说明 #

• 修复后的移动端菜单点击链接后会自动收起，优化用户体验
• 调整了移动端菜单的内边距和图标大小，适配大屏显示
• 原z-index设置无需改动，核心问题已通过修正点击事件解决

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