下拉菜单点击外部关闭，点击<li>无法二次关闭问题求助

问题根源分析 #

你的代码存在三个关键问题：

• ref变量名不匹配：定义的是menuRef1，但逻辑里用的是menuRef.current，导致DOM元素判断完全失效
• 状态切换逻辑错误：当前代码点击菜单内部直接强制设为false，点击外部强制设为true，没有实现切换逻辑，导致二次点击无法触发状态反转
• 事件冒泡冲突：点击<li>元素时，事件会冒泡到document层级，触发全局点击事件，覆盖内部点击的状态修改

修正后的代码实现 #

// 统一ref变量名，确保引用正确
const menuRef = useRef(null);

useEffect(() => {
  const handler = (e) => {
    // 确保ref已挂载到DOM元素
    if (!menuRef.current) return;
    
    // 点击菜单外部时，关闭菜单（对应原逻辑的setListLong(true)）
    if (!menuRef.current.contains(e.target)) {
      setListLong(true);
    }
  };

  document.addEventListener("click", handler);

  return () => {
    document.removeEventListener("click", handler);
  };
// 添加依赖项，避免闭包导致的状态更新异常
}, [setListLong]);

// 给<li>元素绑定单独的点击事件，实现状态切换
const handleMenuItemClick = (e) => {
  // 基于当前状态反转，确保二次点击生效
  setListLong(prev => !prev);
  // 阻止事件冒泡，避免触发document层级的点击监听
  e.stopPropagation();
};

关键修改说明 #

1. 统一ref命名：将menuRef1改为menuRef，确保逻辑中能正确获取到菜单的DOM元素
2. 拆分点击逻辑：全局点击事件只处理「外部点击关闭菜单」的逻辑，内部元素的点击状态切换单独实现，通过stopPropagation()避免事件冒泡干扰
3. 函数式状态更新：setListLong(prev => !prev)确保每次状态变更都基于最新值，避免闭包导致的状态滞后问题
4. 修正依赖数组：给useEffect添加setListLong依赖，保证回调能获取到最新的状态更新函数

额外注意事项 #

• 务必给菜单的根DOM元素绑定ref：<div ref={menuRef}>...</div>
• 如果你的状态逻辑与原代码相反（比如setListLong(false)对应关闭），请自行调整布尔值的赋值

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