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

Question

我的导航栏有问题，实际上它工作得很好，但我不知道如何为锚标记激活 :active psydo class点击。所以这是我的 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;
  }

hamburger button

navigation

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

Answer 1

用简单的 vanilla js 来做

1) select 你所有的菜单链接

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

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

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

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

I want to hide navigation when I click to anchor element

html

css

navigation