如何使用React和NextJS实现带类名切换的响应式菜单

核心逻辑完全依托React状态驱动实现，不需要手动操作原生DOM，和你预期的交互逻辑完全匹配：

• 用useState定义布尔值存储菜单开合状态，初始值设为false（默认关闭）
• 给菜单触发按钮绑定点击事件，点击时翻转状态值
• 给菜单元素动态绑定类名，状态为真时追加open类，所有视觉动效全部交给CSS实现即可

先修正你提供的CSS语法问题 #

CSS属性赋值是用冒号不是等号，否则样式不会生效，补全基础样式参考：

/* 菜单默认收起状态 */
.menu {
  height: 0;
  overflow: hidden;
  /* 可选：加过渡动画让开合更自然，不需要可以删除 */
  transition: height 0.25s ease-in-out;
}
/* 菜单展开状态 */
.menu.open {
  height: calc(100vh - 70px);
}

组件代码实现 #

注意：如果是Next.js App Router环境，带交互的组件顶部必须加'use client'指令，Pages Router环境不需要加

'use client'
import { useState } from 'react'

export default function Navigation() {
  // 存储菜单开合状态
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <>
      {/* 顶部导航栏 高度对应CSS里减去的70px */}
      <header style={{ height: '70px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>站点Logo</div>
        {/* 点击按钮切换菜单状态 */}
        <button onClick={() => setIsMenuOpen(prev => !prev)}>
          菜单按钮
        </button>
      </header>
      {/* 动态拼接类名，打开状态追加open类 */}
      <nav className={`menu ${isMenuOpen ? 'open' : ''}`}>
        <ul>
          <li>首页</li>
          <li>文章分类</li>
          <li>关于我们</li>
        </ul>
      </nav>
    </>
  )
}

补充说明 #

• 不要用原生document.querySelector直接操作DOM改类名，会脱离React的状态管控，很容易出现状态和UI不同步的问题
• 如果项目里类名拼接逻辑比较复杂，可以引入clsx这类轻量工具简化写法，当前这个简单场景用模板字符串完全够用
• 记得给默认状态的.menu加overflow: hidden，否则高度为0时菜单内容还是会溢出显示

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