菜单汉堡包 JavaScript 无法正常工作

Question

这段代码有什么问题？图标在点击后不会改变，显示菜单后也没有内容。控制台中没有错误。

const nav_ = document.querySelector('nav');
const burger = document.querySelector('.burger');
const burgerIco = document.querySelector('.fa-bars');
const closeIco = document.querySelector('.fa-times');
const active_toggle = function() {
nav_.classList.toggle('active');
burger.classList.toggle('active');
if (burger.classList.contains('active')) {
burgerIco.classList.add('hide');
closeIco.classList.remove('hide');
} else {
burgerIco.classList.remove('hide');
closeIco.classList.add('hide');
}
};
burger.addEventListener('click', active_toggle);

* {
box-sizing: border-box;
margin: 0;
padding: 0;
--color: rgb(175, 43, 19);
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
font-family: 'Montserrat', sans-serif;
color: rgb(255, 255, 255);
background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
font-size: 20px;
}
h1 {
text-transform: uppercase;
}
nav {
position: absolute;
height: 100vh;
width: 350px;
left: -350px;
background-image: linear-gradient(315deg, #bf033b 0%, #ffc719 74%);
transition: transform .3s;
}
nav ul {
margin-top: 50px;
list-style: none;
}
nav a {
display: block;
padding: 10px 30px;
color: #333;
text-decoration: none;
}
nav a:hover {
font-weight: bold;
}
.burger {
position: absolute;
top: 0;
left: 0;
padding: 10px 20px;
font-size: 36px;
background: none;
border: none;
cursor: pointer;
color: #fff;
transition: transform .3s;
}
.active {
transform: translateX(350px)
}
.hide {
display: none;
}

<script src="https://kit.fontawesome.com/d3cc5ed543.js"></script>
<button class="burger">
<i class="fas fa-bars"></i>
<i class="fas fa-times hide"></i>
</button>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produkty</a></li>
<li><a href="#">Cennik</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>

编辑。我删除了点，现在内容还可以，但图标仍然没有；t更改

Answer 1

这是因为您的.hidecss被覆盖了，请使其变得重要或添加类似i.hide {//css}的css

const nav_ = document.querySelector('nav');
const burger = document.querySelector('.burger');
const burgerIco = document.querySelector('.fa-bars');
const closeIco = document.querySelector('.fa-times');
const active_toggle = function() {
nav_.classList.toggle('active');
burger.classList.toggle('active');
if (burger.classList.contains('active')) {
burgerIco.classList.add('hide');
closeIco.classList.remove('hide');
} else {
burgerIco.classList.remove('hide');
closeIco.classList.add('hide');
}
};
burger.addEventListener('click', active_toggle);

* {
box-sizing: border-box;
margin: 0;
padding: 0;
--color: rgb(175, 43, 19);
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
font-family: 'Montserrat', sans-serif;
color: rgb(255, 255, 255);
background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
font-size: 20px;
}
h1 {
text-transform: uppercase;
}
nav {
position: absolute;
height: 100vh;
width: 350px;
left: -350px;
background-image: linear-gradient(315deg, #bf033b 0%, #ffc719 74%);
transition: transform .3s;
}
nav ul {
margin-top: 50px;
list-style: none;
}
nav a {
display: block;
padding: 10px 30px;
color: #333;
text-decoration: none;
}
nav a:hover {
font-weight: bold;
}
.burger {
position: absolute;
top: 0;
left: 0;
padding: 10px 20px;
font-size: 36px;
background: none;
border: none;
cursor: pointer;
color: #fff;
transition: transform .3s;
}
.active {
transform: translateX(350px)
}
i.hide {
display: none;
}

<script src="https://kit.fontawesome.com/d3cc5ed543.js"></script>
<button class="burger">
<i class="fas fa-bars"></i>
<i class="fas fa-times hide"></i>
</button>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produkty</a></li>
<li><a href="#">Cennik</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>