我想在单击锚定元素时隐藏导航

Question

我的导航栏有问题，实际上它工作得很好，但我不知道如何在单击时为锚点标签激活:activepsydo类。这是我的html代码和css，也是我想做的主要事情…

这是我导航的html部分

<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon">&nbsp;</span>
</label>
<div id="background" class="navigation__background">&nbsp;</div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"><a href="#" class="navigation__link">About Me</a></li>
<li class="navigation__item"><a href="#" class="navigation__link">Skills</a></li>
<li class="navigation__item"><a href="#projects" class="navigation__link">Projects</a></li>
<li class="navigation__item"><a href="#" class="navigation__link">Contact Me</a></li>
<li class="navigation__item"><a href="#" class="navigation__link">Message Me</a></li>
</ul>
</nav>
</div>

当我按下汉堡包按钮时，导航会出现，当我按下times(X(时，导航关闭这里还有我的css(SASS(代码

.navigation {
&__checkbox {
display: none;
}
&__button {
background-color: $color-white;
height: 7rem;
width: 7rem;
position: fixed;
top: 6rem;
right: 6rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
text-align: center;
cursor: pointer;
@include respond(tab-port) {
top: 4rem;
right: 4rem;
}
@include respond(phone) {
top: 3rem;
right: 3rem;
}
}
&__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 6.5rem;
right: 6.5rem;
background-image: radial-gradient($color-red, $color-black);
z-index: 1000;
transition: transform 0.8s cubic-bezier(0.12, 0.48, 0.49, -0.74);
@include respond(tab-port) {
top: 4.5rem;
right: 4.5rem;
}
@include respond(phone) {
top: 3.5rem;
right: 3.5rem;
}
}
&__nav {
height: 100vh;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1500;
opacity: 0;
width: 0;
transition: all 0.8s cubic-bezier(1, -0.69, 0.73, 1.95);
}
&__list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
width: 100%;
}
&__link {
&:link,
&:visited {
display: inline-block;
padding: 1rem 2rem;
font-size: 3rem;
font-weight: 300;
color: $color-white;
text-decoration: none;
text-transform: uppercase;
background-image: linear-gradient(
120deg,
transparent 0%,
transparent 50%,
$color-white 50%
);
background-size: 230%;
transition: all 0.4s;
}
&:hover {
background-position: 100%;
color: $color-black;
transform: translateX(-1rem);
}
}
&__item {
margin: 1rem;
}
&__checkbox:checked ~ &__background {
transform: scale(80);
}
&__checkbox:checked ~ &__nav {
opacity: 1;
width: 100%;
}
//Icon
&__icon {
position: relative;
margin-top: 3.4rem;
&,
&::before,
&::after {
width: 3rem;
height: 2px;
background-color: $color-grey-dark;
display: inline-block;
}
&::before,
&::after {
content: "";
position: absolute;
left: 0;
transition: all 0.3s;
}
&::before {
top: -0.8rem;
}
&::after {
top: 0.8rem;
}
}
&__button:hover &__icon::before {
top: -1rem;
}
&__button:hover &__icon::after {
top: 1rem;
}

&__checkbox:checked + &__button &__icon {
background-color: transparent;
}
&__checkbox:checked + &__button &__icon::before {
top: 0;
transform: rotate(135deg);
}
&__checkbox:checked + &__button &__icon::after {
top: 0;
transform: rotate(-135deg);
}
}

所以我希望当我按下其中一个锚标签时也能发生同样的事情，我试着像这里一样，当复选框被选中时，把它放在视线之外。

&__checkbox:checked ~ &__background {
transform: scale(80);
}
&__checkbox:checked ~ &__nav {
opacity: 1;
width: 100%;
} 

正如我所说，我试过做这样的事情，但没有成功，所以你知道我该怎么做吗？提前谢谢。

&__link:active ~ &__background{
transform scale(1)
}
&__link:active ~ &__nav {
opacity: 0;
width: 0;
}

汉堡按钮

导航

所以当我点击汉堡包按钮时，导航就会出现，当我再次点击它时，它就会关闭。我想对锚标记做同样的操作，所以当我单击其中一个锚标记菜单时，应该会关闭。这是我的网页，所以你可以更好地分析www.erolramacik.com

Answer 1

使用简单的香草js

1( 选择所有菜单链接

let links = document.querySelectorAll('.navigation__link');

2( 为点击添加监听器，并在发生时将复选框复选状态设置为false

links.forEach(link => { 
link.addEventListener("click", () => { 
document.querySelector('.navigation__checkbox').checked = false
})
})