在 Ant Design 中，实现子菜单在点击菜单项时折叠的方法如下：

1. 首先，在需要展开子菜单的菜单项上使用 antd 中的 SubMenu 组件，给其传递一个唯一的 key。
2. 然后，在父级菜单（需要展开子菜单的菜单项的父级菜单）上添加 onClick 事件处理函数，通过切换该状态的值，来控制子菜单的收缩和展开。示例代码如下：

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

const { SubMenu } = Menu;

const MyMenu = () => {
  const [collapsed, setCollapsed] = useState(false);

  const handleMenuClick = () => {
    setCollapsed(!collapsed);
  }

  return (
    
      } title="Navigation One">
        Option 1
        Option 2
        Option 3
        Option 4
      
      } title="Navigation Two">
        Option 5
        Option 6
        
          Option 7
          Option 8
        
      
      } title="Navigation Three">
        Option 9
        Option 10