DaisyUI导航栏无响应：小屏幕下汉堡菜单不显示

问题描述 #

在React TypeScript项目中使用DaisyUI搭配Tailwind CSS实现Navbar组件时，出现以下响应式问题：

• 小屏幕下汉堡菜单图标不显示
• 中、小屏幕下横向导航栏未隐藏，仅会被压缩

组件代码 #

import React from "react";
import '../../App.css'

export const Navbar = () => {
  return (
    <div className="navbar bg-base-100">
      <div className="navbar-start">
        {/* Hamburger menu for small screens */}
        <div className="dropdown">
          <button tabIndex={0} className="btn btn-ghost lg:hidden">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M4 6h16M4 12h8m-8 6h16" />
            </svg>
          </button>
          <ul
            tabIndex={0}
            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
            <li><a>Item 1</a></li>
            <li>
              <a>Parent</a>
              <ul className="p-2">
                <li><a>Submenu 1</a></li>
                <li><a>Submenu 2</a></li>
              </ul>
            </li>
            <li><a>Item 3</a></li>
          </ul>
        </div>
        {/* Logo or Brand */}
        <a className="btn btn-ghost text-xl">daisyUI</a>
      </div>
      {/* Horizontal menu for large screens */}
      <div className="navbar-center hidden lg:flex">
        <ul className="menu menu-horizontal px-1">
          <li><a>Item 1</a></li>
          <li>
            <details>
              <summary>Parent</summary>
              <ul className="p-2">
                <li><a>Submenu 1</a></li>
                <li><a>Submenu 2</a></li>
              </ul>
            </details>
          </li>
          <li><a>Item 3</a></li>
        </ul>
      </div>
      <div className="navbar-end">
        <a className="btn">Button</a>
      </div>
    </div>
  )
}

预期行为 #

• 中、小屏幕下横向导航栏隐藏，替换为汉堡菜单
• 中、小屏幕下汉堡菜单可点击展开下拉菜单

当前行为 #

• 中、小屏幕下横向导航栏仍可见，仅会压缩
• 小屏幕下汉堡菜单不显示

已尝试方案 #

• 确认Tailwind CSS和DaisyUI已正确配置并导入
• 尝试为汉堡菜单添加block lg:hidden类，为横向菜单添加hidden lg:flex类
• 通过浏览器开发者工具检查元素及应用的类名

修复方案 #

问题核心是断点匹配错误：原代码仅在**超大屏幕（lg，1024px+）隐藏汉堡菜单、显示横向导航，但需求是在中屏幕（md，768px）**就切换显示逻辑。同时需优化下拉菜单的交互体验，具体修改如下：

修改后的完整代码 #

import React from "react";
import '../../App.css'

export const Navbar = () => {
  return (
    <div className="navbar bg-base-100">
      <div className="navbar-start">
        {/* 汉堡菜单：中屏及以下显示 */}
        <div className="dropdown dropdown-end">
          <button tabIndex={0} className="btn btn-ghost md:hidden">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M4 6h16M4 12h8m-8 6h16" />
            </svg>
          </button>
          <ul
            tabIndex={0}
            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
            <li><a>Item 1</a></li>
            <li>
              <a>Parent</a>
              <ul className="p-2">
                <li><a>Submenu 1</a></li>
                <li><a>Submenu 2</a></li>
              </ul>
            </li>
            <li><a>Item 3</a></li>
          </ul>
        </div>
        {/* Logo */}
        <a className="btn btn-ghost text-xl">daisyUI</a>
      </div>
      {/* 横向导航：中屏以上显示 */}
      <div className="navbar-center hidden md:flex">
        <ul className="menu menu-horizontal px-1">
          <li><a>Item 1</a></li>
          <li>
            <details>
              <summary>Parent</summary>
              <ul className="p-2">
                <li><a>Submenu 1</a></li>
                <li><a>Submenu 2</a></li>
              </ul>
            </details>
          </li>
          <li><a>Item 3</a></li>
        </ul>
      </div>
      <div className="navbar-end">
        <a className="btn">Button</a>
      </div>
    </div>
  )
}

关键修改点 #

1. 断点调整：
   • 汉堡菜单按钮类从lg:hidden改为md:hidden（中屏768px以下显示）
   • 横向导航容器类从hidden lg:flex改为hidden md:flex（中屏768px以上显示）
2. 下拉菜单优化：为dropdown添加dropdown-end类，确保下拉菜单对齐右侧，避免溢出屏幕
3. 交互稳定性：保留按钮的tabIndex属性，保证键盘可触发下拉操作

验证方式 #

1. 调整浏览器窗口宽度至768px以下，确认汉堡菜单显示、横向导航隐藏
2. 点击汉堡菜单，确认下拉菜单正常展开/收起
3. 调整窗口宽度至768px以上，确认横向导航显示、汉堡菜单隐藏

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