html - 当我单击另一个链接时，为什么我的导航栏没有关闭？

问题描述

描述：我有一个响应式导航栏，可以很好地打开和关闭。
问题：当我点击一个链接时，它不会自行关闭。我必须手动关闭它。

请在下面找到代码库：

navbar.component.html

<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">

<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">


<div class="header header-fixed">
  <div class="navbar container">
    <div class="logo">
      <div class="logo"><a href="#home">REYA</a></div>
    </div>
    <input type="checkbox" id="navbar-toggle">
    <label for="navbar-toggle"><i></i></label>
    <nav class="menu">
      <ul>
        <li><a (click)="goToHome('home')">Home</a></li>
        <li><a (click)="goToBlogs('more-blogs')">Blogs</a></li>
        <li><a (click)="goToServices('services')">Services</a></li>
        <li><a (click)="goToContact('contact')">Contact</a></li>
        <li><a>Login</a></li>
        <li><a>Sign Up</a></li>
      </ul>
    </nav>
  </div>
</div>
<router-outlet></router-outlet>

导航栏.component.css

body {
  margin: 0;
}

.header-fixed {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #242424;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  line-height: 60px;
}

.navbar .logo {
  height: 80px;
}

.navbar .logo:hover {
  color: #777777;
}

.navbar nav {
  flex: 8;
}

.navbar label {
  user-select: none;
  cursor: pointer;
  padding: 28px 20px;
  position: relative;
  z-index: 3;
}

.navbar label i {
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
  font-style: normal;
  font-weight: normal;
}

.navbar label i:before,
.navbar label i:after {
  content: '';
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.navbar label i,
.navbar label i:before,
.navbar label i:after {
  display: block;
  background: #eee;
}

.navbar label i:before {
  top: 5px;
}

.navbar label i:after {
  top: -5px;
}

.navbar #navbar-toggle {
  display: none;
}

.header #navbar-toggle:checked~.menu {
  visibility: visible;
  opacity: 0.99;
}

.header #navbar-toggle:checked~label {
  background: #212121;
  border-radius: 50%;
}

.header #navbar-toggle:checked~label i {
  background: transparent;
}

.header #navbar-toggle:checked~label i:before {
  transform: rotate(-45deg);
}

.header #navbar-toggle:checked~label i:after {
  transform: rotate(45deg);
}

.header #navbar-toggle:checked~label:not(.steps) i:before,
.header #navbar-toggle:checked~label:not(.steps) i:after {
  top: 0;
}

@media (max-width: 768px) {
  .navbar nav {
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-out;
    display: table;
    background: #ddd;
  }

  .navbar nav ul {
    margin: 0;
    padding: 20px 0;
    display: table-cell;
    vertical-align: middle;
  }

  .navbar nav li {
    display: block;
    text-align: center;
    padding: 20px 0;
    text-align: center;
    font-size: 50px;
    min-height: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-out;
  }

  .navbar nav li:hover {
    background: #525151;
  }

  .navbar nav li:hover a {
    color: #fff;
    transition: all 0.3s ease-out;
  }

  .navbar nav li a {
    color: #212121;
  }
}

@media (min-width: 768px) {
  .navbar nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
    list-style: none;
  }

  .navbar nav li {
    flex: 1;
  }

  .navbar nav li a {
    display: block;
    padding: 0 8px;
    font-size: 16px;
    line-height: 60px;
    color: #fff;
    text-decoration: none;
  }

  .navbar nav li.active {
    background: #555;
  }

  .navbar nav li:hover {
    background: #333;
  }

  .navbar label {
    display: none;
  }
}

.navbar .logo {
  flex: 3;
}

.navbar .logo a {
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
  margin-top: 10px;
}

.navbar .logo a:hover {
  color: #4d4c4c;
  transition: .2s;
}

我尝试了很多选择，包括：

注释掉大部分行
删除媒体查询
删除点击事件

没有任何工作！有人能帮帮我吗？

标签： htmlcss

html - 当我单击另一个链接时，为什么我的导航栏没有关闭？

问题描述

解决方案

推荐阅读