我正在做一個漢堡選單，切換時必須打開。問題是，我可以毫無問題地關閉和打開它，但它在頁面加載時仍然打開。這意味著當您打開頁面時它已經被切換。希望這個解釋清楚。我獲得了此功能的所有代碼。請問有人可以幫忙嗎？
JS
const hamburger = document.querySelector('.navbar__hamburger');
const links = document.querySelector('.nav-primary');
hamburger.addEventListener('click', ()=> {
links.classList.toggle('nav-primary--hide');
});
},
};
HTML
<header class="header">
<div class="header-color">
<div class="container">
<div class="logo__wrapper">
<a class="link__logo" href="index.html">
<div class="header__logo__ctn">
<img class="header__logo" src="./assets/svg/logo-svg-ghosts-02.svg"/>
</div>
<p class="header__title">ghosts team</p>
</a>
</div>
<div class="navbar__hamburger">
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
</div>
<nav class="nav-primary nav-primary--hide">
<ul class="main-menu">
<li class="menu-item"><a class="menu-item-link presentation" href="index.html">présentation</a></li>
<li class="menu-item"><a class="menu-item-link" href="airsoft.html">l'airsoft</a></li>
<li class="menu-item"><a class="menu-item-link" href="terrain.html">terrain</a></li>
<li class="menu-item"><a class="menu-item-link" href="reglement.html">règlement</a></li>
<li class="menu-item"><a class="menu-item-link" href="equipe.html">équipe</a></li>
<li class="menu-item galerie"><a class="menu-item-link" href="gallery.html">galerie photos</a></li>
</ul>
<div class="social__wrapper__ctn">
<ul class="social__wrapper">
<li class="social__item"><a class="social__link" href="/" target="_blank"><span>Suivez nous sur Facebook:</span><i class="fa-brands fa-facebook-f"></i></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
CSS
.container {
width: 100%;
max-width: 1550px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin: 0 auto;
@media screen and (max-width: 1183px) {
align-items: flex-start;
flex-wrap: wrap;
padding: 15px 30px;
}
}
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
.header-color {
background-color: rgba($color: $darkGrey, $alpha: 0.7);
@media screen and (max-width: 1183px) {
background-color: $darkGrey;
}
.logo__wrapper {
@media screen and (max-width: 359px) {
flex: 70%;
}
@media screen and (min-width: 360px) and (max-width: 1183px) {
flex: 80%;
}
.link__logo {
text-decoration: none;
display: flex;
align-items: center;
max-width: 210px;
.header__logo__ctn {
padding-right: 5px;
.header__logo {
height: 56px;
}
}
.header__title {
color: #ffffff;
font-family: $calvous;
}
}
}
.nav-primary {
display: flex;
justify-content: space-between;
align-items: center;
@media screen and (max-width: 1183px) {
flex-direction: column;
justify-content: flex-start;
// height: 100vh;
}
.nav {
display: flex;
justify-content: space-between;
letter-spacing: 2px;
list-style-type: none;
@media screen and (max-width: 1183px) {
flex-direction: column;
}
.menu-item {
text-decoration: none;
@media screen and (max-width: 1183px) {
display: flex;
padding: 8px 0;
}
&::after {
content: url("../../images/assets/svg/bckg-links.png");
@media screen and (max-width: 1183px) {
content: none;
}
}
.presentation {
@media screen and (max-width: 1183px) {
padding: 18px 25px;
}
}
a{
padding: 5px 25px;
color: #ffffff;
font-family: $ubuntuLight;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
&:hover {
border-color: #ceae60;
color: #ceae60;
}
@media screen and (max-width: 1183px) {
font-size: 22px;
padding: 15px 5px;
}
}
}
.menu-item-41 {
&::after {
content: none;
}
}
}
.social__wrapper__ctn {
.social__wrapper {
list-style-type: none;
padding-left: 1em;
.social__item {
@media screen and (max-width: 1183px) {
padding: 10px 0;
}
.social__link {
text-decoration: none;
color: $yellow;
font-family: $ubuntuLight;
&:hover {
border-color: $white;
}
span {
display: none;
@media screen and (max-width: 1183px) {
display: inline;
padding-right: 10px;
}
}
i {
border: 1px solid $yellow;
border-radius: 50%;
width: 25px;
height: 25px;
color: $yellow;
font-size: 15px;
padding: 5px 6.2px;
&:hover {
color: $white;
border-color: $white;
}
}
}
}
}
}
}
.nav-primary--hide {
@media screen and (max-width: 1183px) {
display: none;
}
}
}
.navbar__hamburger {
margin: 10px;
cursor: pointer;
.navbar__hamburger__line {
display: block;
width: 40px;
height: 3px;
margin-bottom: 10px;
background-color: #fff;
}
@media screen and (min-width: 1183px) {
display: none;
}
}
}
.header-pages {
background-image: url("../../images/assets/images/background-fonce.jpg");
position: relative;
}
uj5u.com熱心網友回復：
您只需要洗掉 HTML 代碼中的 nav-primary--hide 類。然后它的行為如你所愿。
其他一切看起來都很好！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/475704.html
標籤：javascript css 汉堡菜单