显示antd水平菜单onClick

Question

在horizontal menu的第一个example中，我想更改“导航3-子菜单”以打开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>
  );
}

演示：