本文详解如何在 React 响应式导航栏中，为移动端折叠菜单内的「Work」项添加可交互的二级下拉功能——通过点击触发（而非 hover），解决 iOS/Android 等触屏设备无法 hover 的根本限制，并确保与现有 mobile menu 状态（click）协同工作，避免冲突。
本文详解如何在 react 响应式导航栏中，为移动端折叠菜单内的「work」项添加可交互的二级下拉功能——通过点击触发（而非 hover），解决 ios/android 等触屏设备无法 hover 的根本限制，并确保与现有 mobile menu 状态（`click`）协同工作，避免冲突。
在当前 NavBar2 实现中，<DropDown /> 仅在桌面端通过 onMouseEnter/onMouseLeave 触发，而移动端（window.innerWidth < 960）完全禁用了下拉逻辑。但用户点击「Work」后进入移动菜单时，仍需访问其子菜单项（如案例中的作品分类）。由于触屏设备无 hover 概念，必须改用显式点击控制 + 独立状态管理，而非复用桌面端的 dropdown 状态。
✅ 正确方案：为移动端「Work」项添加专属二级开关
关键修改点有三处：
1. 在 NavBar2 中为「Work」项添加独立的移动端下拉状态
// NavBar2.jsx —— 新增 mobileDropdown 状态，与全局 click 状态解耦
const [click, setClick] = useState(false);
const [dropdown, setDropdown] = useState(false); // 桌面端 hover 控制
const [mobileDropdown, setMobileDropdown] = useState(false); // 移动端点击控制
// 移动端点击「Work」时切换二级菜单（不关闭主菜单）
const toggleMobileDropdown = () => {
if (window.innerWidth < 960) {
setMobileDropdown(!mobileDropdown);
}
};2. 修改「Work」菜单项的渲染逻辑：区分桌面/移动端行为
<li
className='nav-item'
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<Link
to='/work'
className='nav-links'
onClick={(e) => {
closeMobileMenu(); // 关闭主菜单（可选）
if (window.innerWidth < 960) {
e.preventDefault(); // 阻止跳转，优先展开二级菜单
toggleMobileDropdown();
}
}}
>
Work <i className='fas fa-caret-down' />
</Link>
{/* 移动端：仅当主菜单已展开且 mobileDropdown 为 true 时显示 */}
{click && window.innerWidth < 960 && mobileDropdown && <DropDown />}
{/* 桌面端：保持原有 hover 行为 */}
{!click && window.innerWidth >= 960 && dropdown && <DropDown />}
</li>3. 调整 DropDown 组件：支持受控关闭 + 修复定位问题
当前 DropDown.css 中 .dropdown-menu.clicked { display: none; } 的逻辑有误（clicked 类名与实际状态不符），且绝对定位在移动端会错位。建议重构如下：
// DropDown.jsx —— 支持外部传入 isOpen 和 onClose
export default function DropDown({ isOpen, onClose }) {
return (
<ul className={`dropdown-menu ${isOpen ? 'active' : ''}`}>
{MenuItems.map((item, index) => (
<li key={index}>
<Link
className={item.cName}
to={item.path}
onClick={() => {
if (onClose) onClose(); // 关闭二级菜单
setClick(false); // 同时收起主菜单（可选）
}}
>
{item.title}
</Link>
</li>
))}
</ul>
);
}对应 CSS 修正：
/* DropDown.css */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
width: 200px;
background: linear-gradient(90deg, #1c1b1b, #1a1717);
list-style: none;
margin: 0;
padding: 0;
z-index: 1000;
display: none; /* 默认隐藏 */
}
.dropdown-menu.active {
display: block; /* 显式控制显示 */
}
.dropdown-menu li {
padding: 12px 16px;
}
.dropdown-menu li:hover {
background: rgb(173, 173, 173);
}⚠️ 注意事项与最佳实践
- 不要混用 hover 和 click 状态：移动端必须放弃 onMouseEnter，否则在 Safari/iOS 上可能触发意外行为；
- 避免事件冒泡干扰：<Link> 内部 onClick 中调用 e.preventDefault() 是必要的，防止路由跳转打断二级菜单展开；
- 响应式断点一致性：全项目统一使用 960px 作为移动端阈值（与媒体查询一致），避免逻辑割裂；
- 无障碍支持：为 <ul class="dropdown-menu"> 添加 role="menu"，为每个 <li> 添加 role="menuitem"，并用 aria-expanded 标记「Work」链接状态；
- 性能优化：useEffect 监听 window.resize 动态更新断点判断虽可行，但对本场景非必需；更推荐服务端渲染时注入 isMobile 标志，或使用 react-responsive 包做声明式适配。
通过以上改造，用户在移动端点击「Work」时将获得清晰、可预测的二级菜单交互体验——既符合触屏直觉，又与现有响应式架构无缝集成。
