如何使用 JS 通过链接关闭响应式汉堡菜单？

Question

I am kinda stuck at a roadblock so I figured I come here for some advice.我有点卡在路障上，所以我想我来这里寻求一些建议。

I'm helping my classmate integrate an embed code into their Carrd site.我正在帮助我的同学将嵌入代码集成到他们的 Carrd 站点中。 We got this menu working pretty well but there's 1 feature we can't figure out.我们让这个菜单工作得很好，但有一个我们无法弄清楚的功能。

We're trying to close the responsive hamburger via JS but we're not sure what to do.我们正在尝试通过 JS 关闭响应式汉堡包，但我们不确定该怎么做。 The goal is to close the menu once a link is clicked.目标是在单击链接后关闭菜单。

Any advice would be appreciated, thank you!任何建议将不胜感激，谢谢！

<style>
body {
font-family: 'Helvetica Neue', sans-serif;
font-weight: 400;
}
* {
box-sizing: border-box;
}
nav {
padding: 30px;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav ul li:not(:first-child) {
margin-left: 25px;
}
nav ul li a {
display: inline-block;
outline: none;
color: white;
font-size: 16px;
text-decoration: none;
letter-spacing: 0.04em;
}
nav ul li a:hover {
color: #808080;
text-decoration: none;
}
@media screen and (max-width: 560px) {
.nav-container {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: #1f2227;
opacity: 0;
transition: all 0.2s ease;
}
.nav-container ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-container ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-container ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-container ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-container ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-container ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-container ul li:not(:first-child) {
margin-left: 0;
}
.nav-container ul li a {
padding: 10px 25px;
opacity: 0;
color: #fff;
font-size: 24px;
font-weight: 600;
transform: translateY(-20px);
transition: all 0.2s ease;
}
.nav-open {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-open i {
display: block;
width: 20px;
height: 2px;
background: #1f2227;
border-radius: 2px;
margin-left: 14px;
}
.nav-open i:nth-child(1) {
margin-top: 16px;
}
.nav-open i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-open i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-open {
transform: rotate(45deg);
}
#nav:checked + .nav-open i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-open i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-open i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-open i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-container {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-container ul li a {
opacity: 1;
transform: translateY(0);
}
.hidden {
display: none;
}

.show{
    display:block;
}

</style>

<html>
<nav>
<input type="checkbox" id="nav" class="hidden"/>
<label for="nav" class="nav-open"><i></i><i></i><i></i></label>
<div class="nav-container">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>


</html>

Answer 1

Since you are using a checkbox for the menu, it's as simple as unchecking the checkbox once a link is clicked.由于您使用的是菜单复选框，因此只需单击链接后取消选中该复选框即可。

document.querySelectorAll('li>a').forEach(link => {
  link.addEventListener('click', () => {
    document.querySelector('input[type=checkbox]').checked = false
  })
})

1, Select all the links inside the list with querySelectorAll 1、Select 列表内的所有链接都用querySelectorAll
2, Loop through the links and add a click event listener for each link 2、循环遍历链接，为每个链接添加点击事件监听
3, Select the input tag which is the checkbox and set the checked property to false 3、Select input标签即复选框，并将checked属性设置为false

如何使用 JS 通过链接关闭响应式汉堡菜单？

问题描述

1 个解决方案

解决方案1
1 2022-08-15 03:36:04

如何使用 JS 通过链接关闭响应式汉堡菜单？

问题描述

1 个解决方案

解决方案1 1 2022-08-15 03:36:04

解决方案1
1 2022-08-15 03:36:04