汉堡菜单没有关闭反应

Question

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./index.css";

const Navbar = () => {

    const [display, setDisplay] = useState(false);
    const toggle = () => setDisplay(!display);

    return (
        <>
            <header>
                <nav>
                    <div className="nav">
                        <div className="nav-brand">
                            <Link to="./" className="text-black">Website</Link>
                        </div>
                        <div className="toggle-icon" onClick={toggle}>
                            <i id="toggle-button" className={setDisplay ? 'fas fa-times' : 'fas fa-bars'}/>
                        </div>
                        <div className={setDisplay ? "nav-menu visible" : "nav-menu"}>
                            <ul className="main-menu">

                                <li><Link to="./">Home</Link></li>
                                <li><Link to="./blog">Blog</Link></li>
                                <li className="drp">
                                    <p className="dropbtn">Find <i className="fa-solid fa-angle-down"></i></p>
                                    <ul className="dropdown-content">
                                        <li><Link to="./find/portable-keyboards">Portable Keyboards</Link></li>
                                    </ul>
                                </li>
                                <li className="drp">
                                    <p className="dropbtn">More <i className="fa-solid fa-angle-down"></i></p>
                                    <ul className="dropdown-content">
                                        <li><Link to="./piano-notes">Piano Notes</Link></li>
                                        <li><Link to="./chords">Chords</Link></li>
                                        <li><Link to="./tools/metronome">Metronome</Link></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </header>  
        </>
    )
}

export default Navbar;

我在这里尝试通过单击汉堡包图标来打开和关闭菜单，但没有任何反应。它总是开放的。我不知道出了什么问题。哪位解决了，切换菜单栏。

Answer 1

您正在使用 setDisplay ? <> : <> 作为三元运算符。

请改用 display 才能正常工作。

汉堡菜单没有关闭反应

Hamburger menu is not closing react

javascript

css

menu

reactjs

hamburger-menu