taro3实现多层级手风琴菜单

要实现多层级手风琴菜单，可以使用 Taro3 框架中的 `AtAccordion` 组件。下面是一个示例代码：

import { AtAccordion, AtList, AtListItem } from 'taro-ui';
import { useState } from 'react';

const data = [
  {
    title: '一级菜单1',
    content: [
      { title: '二级菜单1-1', content: ['内容1', '内容2', '内容3'] },
      { title: '二级菜单1-2', content: ['内容4', '内容5', '内容6'] },
    ],
  },
  {
    title: '一级菜单2',
    content: [
      { title: '二级菜单2-1', content: ['内容7', '内容8', '内容9'] },
      { title: '二级菜单2-2', content: ['内容10', '内容11', '内容12'] },
    ],
  },
];

function AccordionMenu() {
  const [openIndexes, setOpenIndexes] = useState([]);

  const handleClick = (index) => {
    let newOpenIndexes = [...openIndexes];
    if (newOpenIndexes.includes(index)) {
      newOpenIndexes = newOpenIndexes.filter((i) => i !== index);
    } else {
      newOpenIndexes.push(index);
    }
    setOpenIndexes(newOpenIndexes);
  };

  return (
    <View>
      {data.map((item, index) => (
        <AtAccordion
          key={index}
          title={item.title}
          open={openIndexes.includes(index)}
          onClick={() => handleClick(index)}
        >
          {item.content.map((subItem, subIndex) => (
            <AtList key={subIndex}>
              <AtListItem title={subItem.title} hasBorder={false} />
              {subItem.content.map((contentItem, contentIndex) => (
                <AtListItem key={contentIndex} title={contentItem} />
              ))}
            </AtList>
          ))}
        </AtAccordion>
      ))}
    </View>
  );
}

export default AccordionMenu;

这个示例代码中，我们首先定义了一个 `data` 数组，用来存储菜单的数据。每个菜单项包括 `title` 和 `content` 两个属性，其中 `title` 表示该菜单项的标题，`content` 表示该菜单项下的子菜单。

然后，我们使用 `useState` 定义了一个 `openIndexes` 状态，用来存储当前展开的菜单项的索引。在 `handleClick` 函数中，我们根据用户点击的菜单项的索引，来更新 `openIndexes` 状态。

最后，我们使用 `AtAccordion`、`AtList` 和 `AtListItem` 组件来实现菜单的展示。在 `AtAccordion` 组件中，我们根据 `openIndexes` 状态来判断该菜单项是否展开；在 `AtList` 组件中，我们展示了子菜单的标题和内容。