我正在嘗試切換類& quot打開& quot在我的漢堡圖標上，但它并不像我想象的那樣工作，我不知道為什么，漢堡圖標只會出現在小屏幕上，因為響應速度
下面是JAVASCRIPT代碼
import "./header.css";
import { useState } from "react";
function Header() {
/*
let menu = document.querySelector(".navbar ul");
let hamburguer = document.querySelector(".hamburguer");
hamburguer.addEventListener("click", function () {
menu.classList.toggle("open");
});*/
const [hamState, setHamState] = useState(false);
function abrirMenu() {
console.log("click");
setHamState((hamState) => !hamState);
}
let openMenu = hamState ? "open" : "";
return (
/*
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/c442a23036.js"
crossOrigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<title>All Black design</title>
</head>
*/
<div>
<header>
<div className="menu">
<div className={`navbar ${openMenu}`}>
<ul>
<li>
<a href="#recuperacao">é difícil ser programador?</a>
</li>
<li>
<a href="#sobre">Se torne um programador</a>
</li>
<li>
<a href="#depoimentos">Veja o que diz quem já fez</a>
</li>
</ul>
</div>
<input type="checkbox" id="hamburguer" />
<label htmlFor="hamburguer">
<div className="hamburguer" onClick={abrirMenu}></div>
</label>
</div>
</header>
</div>
);
}
export default Header;下面是CSS代碼
.container {
padding: 0 2%;
display: flex;
margin: 0 auto;
max-width: 1280px;
}
.menu {
text-align: center;
padding: 11px 0 10px 0;
display: flex;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
}
.navbar {
margin: 0 auto;
}
.navbar ul {
width: 100%;
padding: 20px 0;
list-style: none;
}
.navbar li {
display: inline;
padding: 0 60px;
}
.navbar li a {
font-size: 18px;
text-decoration: none;
color: rgb(105, 1, 190);
font-weight: bold;
transition: 0.5s ease;
}
.navbar li a:hover {
color: rgb(140, 0, 255);
}
input[type="checkbox"] {
display: none;
}
.hamburguer {
display: none;
width: 70px;
height: 70px;
position: fixed;
top: 20px;
right: 0;
cursor: pointer;
}
.hamburguer::after {
content: "";
position: absolute;
width: 70%;
height: 10%;
background-color: rgb(255, 255, 255);
border-radius: 20px;
top: 30%;
left: 15%;
transition: 1s ease;
}
.hamburguer::before {
content: "";
position: absolute;
width: 50%;
height: 10%;
background-color: rgb(255, 255, 255);
border-radius: 20px;
top: 50%;
left: 35%;
transition: 1s ease;
}
#hamburguer:checked ~ label .hamburguer::after {
transform: rotate(225deg);
top: 45%;
background-color: white;
}
#hamburguer:checked ~ label .hamburguer::before {
transform: rotate(-225deg);
left: 15%;
width: 70%;
top: 45%;
background-color: white;
}
@media screen and (max-width: 1080px) {
.logo {
width: 40%;
}
.navbar ul {
position: fixed;
top: 100px;
right: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: red;
/*background-color: rgb(121, 4, 217);*/
transition: transform 0.6s ease-in;
transform: translateX(100%);
}
.open {
transform: translateX(0);
}
.navbar ul li {
padding: 15px 0;
}
.navbar ul li a {
color: white;
transition: 0.3s ease-in;
}
.navbar ul li a:hover {
color: white;
}
.hamburguer {
display: inline-block;
}
}我在react上使用了useState來嘗試更改hamburguer元素上的類，但是沒有成功
你可以試試看:
let openMenu = hamState ? "open" : "";把它改成
let openMenu = useMemo(() => {
return hamState ? "open" : ""
}, [hamState])(然后你需要導入使用備忘錄)