【发布时间】：2021-05-20 15:40:33
【问题描述】：
我将下面的代码用于侧导航菜单。每个导航项都有子导航项。
当前行为
-
子导航项确实会在单击时打开，但是当单击下一个导航标题时，它会关闭当前子菜单，并且需要第二次单击才能打开所需的子菜单。这意味着用户必须单击两次才能打开所需子菜单的子菜单，因为单击一次关闭上一个子菜单，然后单击 2 打开所需的子菜单。
-
点击子菜单项后，整个子菜单关闭
要求的行为
- 默认情况下，网络子菜单应打开，除非用户单击另一个导航标题。
- 当用户单击其中一个子菜单项时，单击的标题和子菜单应保持打开状态。
- 子菜单应通过单击打开并关闭其他打开的子菜单。
代码
import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import userImage from "../../global/assets/img/avatar.png";
import { RiSettings2Line } from "react-icons/ri";
export const AppSideNav = () => {
const [open, setOpen] = useState("networking");
const navDetails = [
{
navId: 1,
navHead: "Networking",
subNavItems: ["item 1", "item 2"],
navLink: "networking",
},
{
navId: 2,
navHead: "Trading",
subNavItems: ["item 1", "item 2"],
navLink: "trading",
},
];
const toggle = (id) => setOpen(open === id ? undefined : id);
const subNavFunction = (navLink, subNavVal) => {
return `/${navLink}/` + `${subNavVal.toLowerCase()}`;
};
return (
<div className="AppSideNavContentContainer">
<div className="AppSideNavContentTop">
<div className="AppSideNavContentTopWrapper">
<div className="AppSideNavUserPicContainer">
<div className="AppSideNavUserPic">
<img src={userImage} alt="user-avatar" className="UserAvatar" />
</div>
</div>
<div className="AppSideNavUserNameContainer">
<div className="AppSideNavUserName">
<div className="AppSideNavUserNameText"> Username</div>
</div>
<div className="AppSideNavUserWalletId"> 0x99343</div>
</div>
<div className="AppSideNavUserDdIconContainer">
<button className="AppSideNavUserDdIconContainerWrapper">
<div className="AppSideNavUserDdIconInner">
<RiSettings2Line />
</div>
</button>
</div>
</div>
</div>
<div className="AppSideNavContentBody">
<div className="SideAppNavBodySection">
<div className="SideAppNavLinkWrapper">
<ul className="SideNavHomeList">
{navDetails.map((items) => (
<NavLink
to={
items.navHead === "Networking"
? "/networking"
: items.navHead === "Trading"
? "/trading"
: items.navHead === "Staking & Mining"
? "/staking"
: items.navHead === "Smart Wallet"
? "/wallet"
: items.navHead === "IDO List"
? "ido"
: ""
}
className="SideNavLinkContainer"
>
<div
className="OverFlowHidden"
onClick={() => toggle(items.navId)}
>
<div className="SideNavLinkItemContainer">
<div className="SideNavLinkItemContainerWrapper">
<div className="SideNavLinkItemContainerInner">
<div className="SideNavLinkItemContainerInnerWrapper">
<span
className={
items.navHead === "Networking"
? "SideNavLinkIcon PortfolioIcon"
: items.navHead === "Trading"
? "SideNavLinkIcon TradingIcon"
: items.navHead === "Staking & Mining"
? "SideNavLinkIcon StakingIcon"
: items.navHead === "Smart Wallet"
? "SideNavLinkIcon WalletIcon"
: "SideNavLinkIcon LaunchIcon"
}
>
{" "}
</span>
</div>
</div>
<span className="SideNavLinkText">
{" "}
{items.navHead}{" "}
</span>
</div>
{open === items.navId && (
<div className="SideNavLinkSubItemsContainer">
<div className="SideNavLinkSubItemsWrapper">
<div>
<span className="SideNavLinkSubItem">
{" "}
{items.subNavItems.map((navItem) => (
<NavLink
to={subNavFunction(items.navLink, navItem)}
>
<div className="SideNavLinkSubItemInner">
<span className="SideNavLinkSubItem">
{" "}
{navItem}
</span>
</div>
</NavLink>
))}
</span>
</div>
</div>
</div>
)}
</div>
</div>
</NavLink>
))}
</ul>
</div>
</div>
</div>
</div>
);
};
【问题讨论】：
-
很难想象你需要什么，你能设置一个codesandbox吗？
-
嗨@diedu，我已经设置了代码沙箱codesandbox.io/s/shy-wave-ru5ce?file=/src/App.js。如您所见，MENU 1 和 MENU 2 的子菜单项是隐藏的，我需要的是 MENU 1 子项在用户访问页面时默认打开。但是当单击菜单 2 时，在单个上一个菜单中，子项应关闭并打开 CLICKED 菜单的子项。例如，当用户单击菜单 2 时，菜单 1 子项应关闭，而菜单 2 子项应通过相同的单击打开。
-
呵呵，我没有得到你想要的东西，我看到你当前版本的代码框可以满足你的要求codesandbox.io/s/icy-surf-w1p8g?file=/src/App.js，或者你需要手风琴之类的东西吗？
标签： reactjs