onClick 显示 antd 水平菜单

Question

在horizontal menu 的第一个example 中，我想将“导航三 - 子菜单”更改为打开onClick 而不是onHover，并想在它旁边添加切换图标（向上和向下箭头） .

Answer 1

在这种情况下，您需要使用Tabs 组件实现自己的菜单。

这里是它如何完成的想法，你需要在显示菜单和切换up/down箭头时添加动画。

<Tabs onTabClick={() => setShowMenu(prev => !prev)}>
  <Tabs.TabPane
    tab={
      <>
        <Icon type="setting" />
        Navigation Three - Submenu
        <Icon type={showMenu ? "up" : "down"} style={{ marginLeft: "10px" }} />
      </>
    }
  />
</Tabs>;
{
  showMenu && (
    <Menu>
      <Menu.ItemGroup title="Item 1">
        <Menu.Item key="setting:1">Option 1</Menu.Item>
        <Menu.Item key="setting:2">Option 2</Menu.Item>
      </Menu.ItemGroup>
      <Menu.ItemGroup title="Item 2">
        <Menu.Item key="setting:3">Option 3</Menu.Item>
        <Menu.Item key="setting:4">Option 4</Menu.Item>
      </Menu.ItemGroup>
    </Menu>
  );
}

演示：