汉堡菜单 Vite React Tailwindcss DaisyUI

Question

我想为小屏幕网站创建一个汉堡菜单，我使用 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>
    </>

我尝试在控制台中查找问题所在的线索，但什么也没找到。

Answer 1

我认为您的代码是正确的，但我认为您也应该将切换逻辑应用于

<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>
        </>
    );
}