移动端Hamburger菜单点击导航链接后无法自动关闭问题求助

问题说明 #

桌面端导航为横向布局，移动端切换为汉堡菜单，基础展开/收起功能正常，但点击导航链接后菜单不会自动关闭，遮挡页面内容。

解决思路 #

当前菜单的显示/隐藏完全依赖#check复选框的checked状态，点击汉堡按钮会切换该状态，但导航链接未绑定切换状态的逻辑。只需给每个导航链接添加点击事件，在移动端（汉堡按钮可见时）将复选框的checked状态设为false即可。

实现步骤 #

1. 添加点击事件逻辑
   在HTML的<body>末尾插入以下JavaScript代码，给所有导航链接绑定关闭菜单的逻辑：

   const navLinks = document.querySelectorAll('.nav-list li a');
   const checkBox = document.getElementById('check');
   
   navLinks.forEach(link => {
     link.addEventListener('click', () => {
       // 仅在移动端分辨率下执行关闭操作
       if (window.innerWidth < 1100) {
         checkBox.checked = false;
       }
     });
   });
   

2. 可选：窗口尺寸切换优化
   若用户在移动端和桌面端之间调整窗口大小，可添加窗口监听确保菜单状态正常：

   window.addEventListener('resize', () => {
     // 切换到桌面端时自动关闭菜单
     if (window.innerWidth >= 1100) {
       checkBox.checked = false;
     }
   });
   

修改后的完整代码 #

CSS（无需改动） #

nav {
height: 75px;
width: 100%;
background-color: #171c1f;
display: flex;
justify-content: space-between;
z-index: 99;
}
.logo-container {
display: flex;
align-items: center;
width: auto;
margin: 0;
}
.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(255, 255, 255);
cursor: pointer;
}
.nav-list {
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background: #4a499e;
float: right;
text-align: center;
transition: all .5s;
z-index: 2;
}
.nav-list li {
opacity: 0;
line-height: 30px;
margin: 50px 0;
transition: all .5s;
}
.nav-list li a {
color: #fff;
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
transition: .5s;
}
.nav-list li a.active,.nav-list li a:hover{
color: #00b1f7;
transition: 0.5s;
}
.hamburger-btn {
display: block;
font-size: 30px;
color: white;
float: right;
line-height: 75px;
margin-right: 40px;
cursor: pointer;
}
#check {
display: none;
}
#check:checked ~ .nav-list {
height: 100vh;
}
#check:checked ~ .nav-list li {
opacity: 1;
}
@media only screen and (min-width: 1100px) {
nav{
height: 100px;
background-color: transparent;
}

.hamburger-btn{
display: none;
}

.nav-list {
position: relative;
height: 100px;
top: 0;
background: none;
float: right;
text-align: right;
margin-right: 25px;
transition: none;
text-shadow: 2px 2px 3px #00b1f7;
}

.nav-list li a {
color: rgb(0, 0, 0);
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
}

.nav-list li{
display: inline-block;
opacity: 1;
line-height: 100px;
margin: 0 20px;
transition: none;
}

.nav-list li a.active, .nav-list li a:hover {
color: #00b1f7;
text-shadow: 1px 1px #000000;
}

.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(0, 0, 0);
cursor: pointer;
} 
}

HTML（添加JavaScript代码） #

<header>
    <nav>
        <div class="logo-container">
            <label class="logo-txt">Autirock</label>
        </div>
        <input type="checkbox" id="check">
        <label for="check" class="hamburger-btn">
            <i class="fas fa-bars"></i>
        </label>
        <ul class="nav-list">
            <li><a class="active" href="#banner">DOMŮ</a></li>
            <li><a href="#sluzby-a-pomucky">SLUŽBY A POMŮCKY</a></li>
            <li><a href="#">O MNĚ</a></li>
            <li><a href="#cenik-a-sluzby">CENÍK</a></li>
            <li><a href="#kontakt">KONTAKT</a></li>
        </ul>
    </nav>
</header>

<script>
const navLinks = document.querySelectorAll('.nav-list li a');
const checkBox = document.getElementById('check');

navLinks.forEach(link => {
  link.addEventListener('click', () => {
    if (window.innerWidth < 1100) {
      checkBox.checked = false;
    }
  });
});

// 可选：窗口尺寸切换时自动同步菜单状态
window.addEventListener('resize', () => {
  if (window.innerWidth >= 1100) {
    checkBox.checked = false;
  }
});
</script>

内容的提问来源于stack exchange，提问作者Lukas Valter