Для этого вопроса, пожалуйста, измените ширину экрана до 600px. Когда экран меньше 600 пикселей, он работает отлично, но когда экран становится больше, чем 600 пикселей, его отображение не становится явным? HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Navbar Toggle</title>
</head>
<body>
<div class="container">
<div class="navbar">
<ul>
<li class="toggle">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</li>
<div id="flex">
<li><a href="#">Home</a></li>
<li><a href="#">Trends</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</div>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #333945;
}
.navbar {
background-color: #019031;
color: white;
}
.navbar ul {
margin: 0;
}
.navbar #flex {
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
list-style-type: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.navbar #flex a {
font-size: 5vh;
display: block;
color: white;
text-decoration: none;
display: block;
padding: 25px;
}
.navbar #flex a:hover {
background-color: #333945;
}
.toggle {
display: none;
cursor: pointer;
padding: 15px 10px;
}
.toggle .bar1, .toggle .bar2, .toggle .bar3 {
width: 40px;
height: 5px;
background-color: whitesmoke;
margin: 6px 0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.change {
display: inline-block;
cursor: pointer;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
@media only screen and (max-width: 600px) {
.navbar #flex {
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.navbar #flex a {
text-align: center;
}
.navbar .toggle {
display: block;
}
}
Javascript
let toggle = document.getElementsByClassName("toggle")[0];
toggle.addEventListener("click",myToggle,false);
function myToggle(){
toggle.classList.toggle("change");
}
toggle.addEventListener("click",navFunction,false);
function navFunction(){
var itemsDisplay = document.getElementById("flex");
if (itemsDisplay.style.display === "flex") {
itemsDisplay.style.display = "none";
} else {
itemsDisplay.style.display = "flex";
}
}
Пожалуйста, помогите мне с этим вопросом. Я новичок в javascript. Я действительно ценю, если кто-то поможет мне. Спасибо