如何解决Material UI ListItem三级下拉菜单二级点击联动展开问题

你的问题根源在于所有二级菜单共用了同一个布尔状态sublistcl，导致点击任意二级项时，所有三级子菜单的Collapse组件都会基于这个统一状态切换展开/收起。要实现二级项独立控制对应三级菜单，需要修改状态存储逻辑，让状态记录具体是哪个二级项被展开。

修改步骤： #

1. 调整状态结构
   将原来的单个布尔值状态改为存储当前展开的二级菜单ID（支持单开模式，若要多开可改用Set存储）：

// 初始值设为null，表示没有展开的二级菜单
const [expandedSubId, setExpandedSubId] = useState(null);

2. 更新点击事件处理函数
   点击二级项时，切换对应ID的展开状态：

const handleSubClick = (subId) => {
  // 如果当前点击的ID已展开，就收起；否则展开该ID对应的菜单
  setExpandedSubId(prevId => prevId === subId ? null : subId);
};

3. 修改二级项的交互逻辑
   给每个二级项的点击事件传递自身ID，并根据当前展开状态切换图标：

<ListItemButton 
  sx={{ pl: 4 }}
  onClick={() => handleSubClick(menuSubItem.id)}
  key={menuSubItem.id}
>
  <ListItemText primary={menuSubItem.sublist} />
  {/* 根据当前二级项ID是否匹配展开状态切换图标 */}
  {expandedSubId === menuSubItem.id ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>

4. 绑定三级菜单的展开状态
   让三级菜单的Collapse组件仅在对应二级项ID匹配展开状态时显示：

{menuItem?.dropDown?.map((menuSubItem) => (
  <div className="sub-drop-down" key={menuSubItem.id}>
    <Collapse in={open} >
      <List component="div" disablePadding>
        {/* 二级项代码（已修改） */}
        <ListItemButton 
          sx={{ pl: 4 }}
          onClick={() => handleSubClick(menuSubItem.id)}
        >
          <ListItemText primary={menuSubItem.sublist} />
          {expandedSubId === menuSubItem.id ? <ExpandLess /> : <ExpandMore />}
        </ListItemButton>
        {/* 三级子菜单代码（已修改） */}
        <Collapse in={expandedSubId === menuSubItem.id}>
          <List component="div" disablePadding>
            {menuSubItem?.superSubList?.map((itemThird, idx) => (
              <ListItemButton key={idx} sx={{ pl: 5 }}>
                <ListItemText primary={itemThird.superlist} />
              </ListItemButton>
            ))}
          </List>
        </Collapse>
      </List>
    </Collapse>
  </div> 
))}

补充：支持多开模式 #

如果需要同时展开多个二级菜单，可将状态改为Set类型：

const [expandedSubIds, setExpandedSubIds] = useState(new Set());

const handleSubClick = (subId) => {
  setExpandedSubIds(prev => {
    const newSet = new Set(prev);
    if (newSet.has(subId)) {
      newSet.delete(subId);
    } else {
      newSet.add(subId);
    }
    return newSet;
  });
};

// 二级项图标判断
{expandedSubIds.has(menuSubItem.id) ? <ExpandLess /> : <ExpandMore />}

// 三级菜单Collapse状态
<Collapse in={expandedSubIds.has(menuSubItem.id)}>

内容的提问来源于stack exchange，提问作者Rita Mehra