展开侧边栏的时候，以前点击的二级菜单默认折叠起来，如何实现

[wangfeiyu2020]

🧐 问题描述 | Problem description

原来选中二级菜单，折叠打开的时候会默认展现二级菜单，我想实现，选中二级菜单，折叠打开的时候默认选中一级菜单，二级菜单自动闭合，实现图1到图2的切换

💻 示例代码 | Sample code

🚑 其他信息 | Other information

OS:

Node：

浏览器 | browser：

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

你好！感谢你提出这个问题。根据你的描述，你想实现一个侧边栏切换的功能，当展开一个二级菜单时，默认选中一级菜单并且二级菜单自动闭合。以下是一个可能的解决方案：

你可以使用 React 和 antd（Ant Design）库来实现这个功能。首先，你需要检查你的项目是否已经安装了相应的依赖包。你可以在命令行中使用以下命令来安装它们：

npm install react antd

接下来，你可以使用 antd 的 Menu 组件来创建侧边栏。在定义菜单项时，你可以使用 SubMenu 组件来创建二级菜单。为了实现自动闭合的效果，你可以使用 openKeys 属性来控制已打开的菜单项。

在处理菜单项的点击事件时，你可以使用 onOpenChange 属性来更新 openKeys 的值。当用户点击二级菜单时，你可以将其父菜单的 key 添加到 openKeys 中。这样，在菜单渲染时，这些菜单项就会自动展开。

下面是一个示例代码，演示了如何实现你的需求：

import React, { useState } from "react";
import { Menu } from "antd";
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

const Sidebar = () => {
  const [openKeys, setOpenKeys] = useState([]);

  const handleClick = (e) => {
    const { keyPath } = e;
    // 将点击的菜单项的父菜单添加到 openKeys 中
    setOpenKeys([keyPath[keyPath.length - 2]]);
  };

  return (
    <Menu
      mode="inline"
      openKeys={openKeys}
      onOpenChange={setOpenKeys}
    >
      <SubMenu
        key="sub1"
        title={
          <span>
            <MailOutlined />
            <span>Navigation One</span>
          </span>
        }
      >
        <Menu.Item key="1" onClick={handleClick}>Option 1</Menu.Item>
        <Menu.Item key="2" onClick={handleClick}>Option 2</Menu.Item>
        <Menu.Item key="3" onClick={handleClick}>Option 3</Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub2"
        title={
          <span>
            <AppstoreOutlined />
            <span>Navigation Two</span>
          </span>
        }
      >
        <Menu.Item key="4" onClick={handleClick}>Option 4</Menu.Item>
        <Menu.Item key="5" onClick={handleClick}>Option 5</Menu.Item>
        <Menu.Item key="6" onClick={handleClick}>Option 6</Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub3"
        title={
          <span>
            <SettingOutlined />
            <span>Navigation Three</span>
          </span>
        }
      >
        <Menu.Item key="7" onClick={handleClick}>Option 7</Menu.Item>
        <Menu.Item key="8" onClick={handleClick}>Option 8</Menu.Item>
        <Menu.Item key="9" onClick={handleClick}>Option 9</Menu.Item>
      </SubMenu>
    </Menu>
  );
};

export default Sidebar;

在上述示例代码中，我们使用了 Menu 和 SubMenu 组件来创建侧边栏。handleClick 函数用于处理菜单项的点击事件，并更新 openKeys 的值。注意在菜单项中添加了 onClick 属性来绑定点击事件。

你可以根据自己的需求和项目结构来调整菜单项的结构和样式。

我们的解决方案主要依赖于 antd 提供的组件和 API，你可以查阅官方文档以了解更多信息：

• Ant Design Menu 文档：https://ant.design/components/menu-cn/
• Ant Design SubMenu 文档：https://ant.design/components/menu-cn/#SubMenu

希望这个解决方案能对你有所帮助！如果你还有其他