我想为小屏幕网站创建一个汉堡菜单,我使用 useState 将变量默认设置为 false,然后为按钮创建一个 onClick 函数,该函数更改 useState 变量并切换 div 菜单项的隐藏和可见。问题是,虽然我在重新加载页面时将变量设置为 false,但出现菜单时我可以做些什么来解决这个问题,或者我应该以其他方式解决这个问题。
这是我的代码
export default function NavBar() {
const [toggleMenu, setToggleMenu] = useState(false);
const viewMenu = () => {
setToggleMenu(!toggleMenu)
}
return (
<>
<div className="flex justify-around w-[90%] my-3 mx-auto rounded-md navbar bg-base-200">
<div>
<button onClick={viewMenu} className="text-xl btn">
<BiMenuAltLeft />
</button>
</div>
<div>
<button className="text-2xl btn btn-ghost">MEDFITS</button>
</div>
<div>
<button className="p-2 text-xl btn"><VscAccount /></button>
<button className="p-2 text-xl btn"><BiSearchAlt /></button>
</div>
</div>
<div className={`w-fit bg-base-200 mx-10 rounded-md ${toggleMenu && "hidden" }`}>
<ul className="p-4 text-center">
<li><a className="btn btn-wide" href="/">HOME</a></li>
<li><a className="btn btn-wide" href="/about">ABOUT</a></li>
<li><a className="btn btn-wide" href="/shop">SHOP</a></li>
<li><a className="btn btn-wide" href="/contact">CONTACT</a></li>
</ul>
</div>
</>
我尝试在控制台中查找问题所在的线索,但什么也没找到。
我认为您的代码是正确的,但我认为您也应该将切换逻辑应用于
<ul>
容器。我还喜欢使用三元运算符,同时为组件提供条件类名。
这是我的实现:
export default function NavBar() {
const [toggleMenu, setToggleMenu] = useState(false);
const viewMenu = () => {
setToggleMenu(!toggleMenu);
};
return (
<>
<div className="flex justify-around w-[90%] my-3 mx-auto rounded-md navbar bg-base-200">
<div>
<button onClick={viewMenu} className="text-xl btn">
<BiMenuAltLeft />
</button>
</div>
<div>
<button className="text-2xl btn btn-ghost">MEDFITS</button>
</div>
<div>
<button className="p-2 text-xl btn"><VscAccount /></button>
<button className="p-2 text-xl btn"><BiSearchAlt /></button>
</div>
</div>
<div className={`w-fit bg-base-200 mx-10 rounded-md ${toggleMenu ? '' : 'hidden'}`}>
<ul className={`p-4 text-center ${toggleMenu ? '' : 'hidden'}`}>
<li><a className="btn btn-wide" href="/">HOME</a></li>
<li><a className="btn btn-wide" href="/about">ABOUT</a></li>
<li><a className="btn btn-wide" href="/shop">SHOP</a></li>
<li><a className="btn btn-wide" href="/contact">CONTACT</a></li>
</ul>
</div>
</>
);
}