Ant Design子菜单点击菜单项后保持下拉窗口显示的实现方法

要实现点击Menu2的子菜单项后仍保持子菜单展开，需要手动控制SubMenu的展开状态，替代Antd默认的hover自动关闭逻辑，具体实现如下：

核心思路 #

通过React状态变量绑定SubMenu的open属性，保留原有的hover展开/收起行为，点击子菜单项时不修改状态变量，从而维持子菜单的展开状态。

基础实现代码 #

import React, { useState } from "react";
import { Menu } from "antd";

const App = () => {
  // 状态变量控制子菜单是否展开
  const [subMenuOpen, setSubMenuOpen] = useState(false);

  return (
    <Menu mode="horizontal">
      <Menu.Item key="mail">Menu1</Menu.Item>
      <Menu.SubMenu
        key="SubMenu"
        title="Menu2"
        // 绑定展开状态
        open={subMenuOpen}
        // 鼠标移入时展开子菜单
        onMouseEnter={() => setSubMenuOpen(true)}
        // 鼠标移出时收起子菜单
        onMouseLeave={() => setSubMenuOpen(false)}
      >
        <Menu.Item key="two" onClick={() => {
          // 这里添加你的业务逻辑，比如跳转、数据处理
          console.log("点击Sub Menu1");
          // 不修改subMenuOpen状态，保持子菜单展开
        }}>Sub Menu1</Menu.Item>
        <Menu.Item key="three" onClick={() => {
          console.log("点击Sub Menu2");
        }}>Sub Menu2</Menu.Item>
      </Menu.SubMenu>
    </Menu>
  );
};
export default App;

优化：点击外部区域自动关闭子菜单 #

如果希望点击页面其他区域时自动收起子菜单，提升用户体验，可以添加全局点击监听：

import React, { useState, useEffect, useRef } from "react";
import { Menu } from "antd";

const App = () => {
  const [subMenuOpen, setSubMenuOpen] = useState(false);
  // 引用Menu组件的DOM元素，用于判断点击区域
  const menuRef = useRef(null);

  useEffect(() => {
    // 点击外部区域时关闭子菜单
    const handleClickOutside = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setSubMenuOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    // 组件卸载时移除监听
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <Menu mode="horizontal" ref={menuRef}>
      <Menu.Item key="mail">Menu1</Menu.Item>
      <Menu.SubMenu
        key="SubMenu"
        title="Menu2"
        open={subMenuOpen}
        onMouseEnter={() => setSubMenuOpen(true)}
        onMouseLeave={() => setSubMenuOpen(false)}
      >
        <Menu.Item key="two" onClick={() => {
          console.log("点击Sub Menu1");
        }}>Sub Menu1</Menu.Item>
        <Menu.Item key="three" onClick={() => {
          console.log("点击Sub Menu2");
        }}>Sub Menu2</Menu.Item>
      </Menu.SubMenu>
    </Menu>
  );
};
export default App;

关键说明 #

• 手动控制open属性后，Antd默认的hover关闭逻辑会被覆盖，需通过onMouseEnter和onMouseLeave手动实现原有hover行为
• 子菜单项的onClick事件仅处理业务逻辑，不修改subMenuOpen状态，确保点击后子菜单保持展开
• 全局点击监听可以避免子菜单无意义地停留在页面上

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