点击导航栏外部自动关闭移动端菜单的实现方法

基于事件委托的点击外部关闭方案

正确的实现思路是：使用 useRef 绑定导航栏容器，配合 useEffect 监听全局点击事件，通过判断点击目标是否位于菜单内部或菜单按钮本身，来实现点击外部自动关闭菜单的效果。

优化后的 Navbar 代码实现

以下是改造后的 Navbar 组件代码，关键改动已标注：

import { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import { styles } from '../styles';
import { na vLinks } from '../constants';
import { logo, menu, close } from '../assets';

const Na vbar = () => {
  const [active, setActive] = useState('');
  const [toggle, setToggle] = useState(false);
  const na vbarRef = useRef(null); // 指向整个 na vbar 的 DOM 结构

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (na vbarRef.current && !na vbarRef.current.contains(event.target)) {
        const menuButton = event.target.closest('img[alt="menu"]');
        if (!menuButton) {
          setToggle(false);
        }
      }
    };
    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  return (
    
      

         {
            setActive("");
            window.scrollTo(0, 0);
          }}
        >
          
          

            I am a ----   |   Software Engineer
          
        
        

           setToggle(!toggle)}
          />
          

            

              {na vLinks.map((link) => (
                
 {
                    setToggle(false);
                    setActive(link.title);
                  }}
                >
                  {link.title}
                
              ))}
            
          
        
      
    
  );
};

export default Na vbar;

关键实现要点

• 使用 useRef 绑定整个 元素，将其作为菜单区域的边界容器；
• 通过 useEffect 在组件挂载时注册 document 的全局点击事件，卸载时自动清理监听，避免内存泄漏；
• 利用 event.target.closest('img[alt="menu"]') 判断点击是否来自菜单按钮，相比 event.target === menuBtn 的方式更健壮，可有效避免误关闭；
• 点击菜单项时同步执行 setToggle(false)，确保交互响应的一致性；
• 不建议使用 onBlur 或 tabIndex 方案，这种方式会导致键盘焦点管理混乱，降低屏幕阅读器兼容性，且无法覆盖所有点击场景。

进阶扩展建议

如需支持触摸设备上的滑动关闭操作，可扩展监听 touchstart 事件。若菜单中包含子菜单结构，则需要递归处理 contains() 方法的嵌套层级判断。对于当前的单层下拉菜单场景，上述方案已能满足 WCAG 2.1 可访问性标准，并符合主流移动端 UX 设计规范，是实用性较强的实现方式。