【发布时间】：2022-11-29 04:58:15
【问题描述】：
我正在尝试创建一个带有一系列材料 ui 下拉菜单的导航栏，但我遇到了一个我似乎无法解决的问题。当我单击一个导航栏项时，所有下拉菜单都会在我单击的菜单项下彼此重叠打开。下面是代码：
import styles from "./AppNav.module.css";
import { navData } from "./navData.js";
import Link from "next/link";
import {Button, Menu, MenuItem } from '@mui/material';
import { style } from "@mui/system";
import { useState } from "react";
export default function AppNav(props:any){
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return(
<>
<ul id="menu-topLvl" className={styles.Menu}>
<li><Button><Link className={styles.homeLink} href="/">Home</Link></Button></li>
{navData.map((navItem, index) => {
return <li key={index}>
<Button
id={navItem.navHeading}
key={navItem.id}
aria-controls={open ? navItem.navHeading : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
>
{navItem.navHeading}
</Button>
<Menu
id={navItem.navHeading}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': navItem.navHeading,
}}
>
{navItem.lvlTwo.map((subNav, index) =>
<MenuItem
key={index}
onClick={handleClose}
>
<Link href={subNav.link}>
{subNav.subNavHeading}
</Link>
</MenuItem>
)}
</Menu>
</li>
})}
</ul>
</>
)
}
和数据：
{
id: 2,
navHeading: 'Merchant',
link: '',
hasSubs:true,
lvlTwo:[
{
subNavHeading: 'Statement',
link:"Merchant/Statement.tsx",
},
{
subNavHeading: 'Invoice',
link:"",
},
{
subNavHeading: 'Transaction Lookup',
link:"",
},{
subNavHeading: 'Batch Lookup',
link:"",
},{
subNavHeading: 'Funding Lookup',
link:"",
},{
subNavHeading: 'Funded Transaction',
link:"",
},{
subNavHeading: 'Statement',
link:"",
},{
subNavHeading: 'Submitted Transaction',
link:"",
},{
subNavHeading: 'Returns',
link:"",
}
]
},{
id: 3,
navHeading: 'Partner',
link: '',
hasSubs:true,
lvlTwo:[
{
subNavHeading: 'Statement',
link:"",
},{
subNavHeading: 'Invoice',
link:"",
},{
subNavHeading: 'Funded Transaction',
link:"",
},{
subNavHeading: 'Submitted Transaction',
link:"",
},
]
},{
id: 4,
navHeading: 'Processing',
link: '',
hasSubs:true,
lvlTwo:[
{
subNavHeading: 'Transaction Detail',
link:"",
},{
subNavHeading: 'Transaction Summary',
link:"",
},{
subNavHeading: 'Transactions By Merchant',
link:"",
},{
subNavHeading: 'Transactions By Batch',
link:"",
},{
subNavHeading: 'Return Summary',
link:"",
},{
subNavHeading: 'Boarding Stats',
link:"",
},{
subNavHeading: 'Risk Summary',
link:"",
},{
subNavHeading: 'Uncollected Invoices/ACH Exceptions',
link:"",
},{
subNavHeading: 'ACH Exceptions',
link:"",
},{
subNavHeading: 'Unsettled Transation Voids',
link:"",
},{
subNavHeading: 'Bank account Update Logs',
link:"",
},
]
},{
id: 5,
navHeading: 'Accounting',
link: '',
hasSubs:true,
lvlTwo:[
{
subNavHeading: 'Returns',
link:"",
},{
subNavHeading: 'Compensation',
link:"",
},{
subNavHeading: 'Income Statement',
link:"",
},{
subNavHeading: 'Income/Charges',
link:"",
},{
subNavHeading: 'Processing Balances',
link:"",
},{
subNavHeading: 'Return Balances',
link:"",
},{
subNavHeading: 'Colonnade 1099k',
link:"",
},{
subNavHeading: 'Colonnade 1099k Summary',
link:"",
},{
subNavHeading: 'ODFI Exposure',
link:"",
},{
subNavHeading: 'File Entries',
link:"",
},{
subNavHeading: 'Activated Merchant',
link:"",
},{
subNavHeading: 'Aging Deposits',
link:"",
},
]
},
]
我不明白如何一次只打开一个菜单项。
【问题讨论】：
标签： javascript reactjs material-ui