当我单击mavbar开关按钮时，开关不会出现，它会立即弹出我在youtube教程中看到过这一点，它对他来说很好，但当我尝试它时，切换开关没有显示，我不知道问题是什么，我检查了代码，代码也一样有人能帮我解决这个问题吗提前感谢
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
}).navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #195794;
padding: 0 !important;
}
.brand-title {
font-size: 1.5rem;
margin: 1rem;
color: white;
}
.navbar-links ul {
display: flex;
margin: 0;
}
.navbar-links ul li {
list-style: none;
}
.navbar-links ul li a {
text-decoration: none;
color: white;
padding: 1.2rem;
display: block;
}
.navbar-links ul li:hover {
background-color: #1d64aa;
}
.toggle-button {
position: absolute;
top: 1.3rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 2rem;
height: 1.4rem;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
@media(max-width:800px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links.active {
display: flex;
}
}<nav class="navbar">
<div class="brand-title"> title</div>
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</div>
</nav>JS 中存在问题
您需要通过禁用链接
toggleButton.addEventListener('click', (e) => {
e.preventDefault();
navbarLinks.classList.toggle('active')
})
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', (e) => {
e.preventDefault();
navbarLinks.classList.toggle('active')
}).navbar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #195794;
padding: 0 !important;
}
.brand-title{
font-size: 1.5rem;
margin: 1rem;
color: white;
}
.navbar-links ul{
display: flex;
margin: 0;
}
.navbar-links ul li{
list-style: none;
}
.navbar-links ul li a{
text-decoration: none;
color: white;
padding: 1.2rem;
display: block;
}
.navbar-links ul li:hover{
background-color: #1d64aa;
}
.toggle-button{
position: absolute;
top: 1.3rem;
right:1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 2rem;
height: 1.4rem;
}
.toggle-button .bar{
height:3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
@media(max-width:800px){
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links ul li{
text-align: center;
}
.navbar-links.active{
display: flex;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Site.css">
</head>
<body>
<nav class="navbar">
<div class="brand-title"> title</div>
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</div>
</nav>
<script src="Site.js"></script>
</body>
</html>检查切换按钮
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
将其更改为div:
<div class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
更改切换按钮CSS:
.toggle-button:hover{
cursor: pointer
}