ReactJS开发电商网站巨型菜单鼠标下移时自动隐藏问题排查

问题根源 #

你将onMouseEnter、onMouseLeave事件绑定到了<a>标签上，而巨型菜单的div是和<a>平级的兄弟节点，不属于<a>的节点范围。当鼠标从<a>移向下方菜单的瞬间，就会触发<a>的onMouseLeave事件执行隐藏逻辑，导致菜单在你移入前就被收起。

解决方案 #

将两个鼠标事件移到外层包裹了<a>和菜单div的<li>标签上即可。修改后只要鼠标还在<li>的范围内（无论是停在顶部导航文字还是下方展开的菜单区域），都不会触发隐藏，只有完全移出整个<li>区域才会收起菜单。

修改后的JSX代码如下：

<li 
  className="mega-drop-down collapsed"
  onMouseEnter={showMenu}
  onMouseLeave={hideMenu}
>
  <a className="accord-icon">
    WHAT WE DO
  </a>
  <div
    className="animated fadeIn mega-menu"
    style={{ display: visible ? "block" : "none" }}
  >
    {/* 菜单内部原有代码保持不变 */}
    <div className="mega-menu-wrap">
      <div className="row-t">
        <div className="col-md-8">
          <h4 className="row-t mega-title title1">
            <a> Translation Services</a>
          </h4>
          <div className="border-line title1">
            <div className="row-t">
              <ul className="stander">
                <div className="col-md-4">
                  <li>
                    <a> Supported languages</a>
                  </li>
                </div>
                <div className="col-md-4">
                  <li>
                    <a> Translation Cost</a>
                  </li>
                </div>                               
              </ul>
            </div>
            <div className="row-t">
              <div className="col-md-4">
                <h4 className="row-t mega-title title2">
                  Areas of Expertise
                </h4>
                <div className="border-line title2">
                  <ul className="stander">
                    <li>
                      <a> Document</a>
                    </li>
                    <li>
                      <a> Legal</a>
                    </li>                                   
                    <li>
                      <a> Technical</a>
                    </li>                                   
                  </ul>
                </div>
              </div>
              <div className="col-md-4">
                <h4 className="row-t mega-title title2">
                  Localization
                </h4>
                <div className="border-line title2">
                  <ul className="stander">                                   
                    <li>
                      <a> Mobile App</a>
                    </li>
                    <li>
                      <a> Software</a>
                    </li>
                    <li>
                      <a> Medical</a>
                    </li>
                  </ul>
                </div>
              </div>                              
            </div>
          </div>
        </div>                        
      </div>
    </div>
  </div>
</li>

可选优化（避免间隙误触发） #

如果你的导航文字和菜单之间有CSS空隙，可给隐藏逻辑加短延迟，避免鼠标移动过程中误触发隐藏，修改后的状态逻辑如下（需先从react导入useRef）：

import { useState, useRef } from 'react';

// ...

const [visible, setVisible] = useState(false);
const hideTimer = useRef(null);

const showMenu = () => {
  // 显示前清空未执行的隐藏定时任务
  if (hideTimer.current) {
    clearTimeout(hideTimer.current);
    hideTimer.current = null;
  }
  setVisible(true);
};

const hideMenu = () => {
  // 300ms缓冲时间可根据实际需求调整
  hideTimer.current = setTimeout(() => {
    setVisible(false);
  }, 300);
};

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