在移动视图中，当用户点击链接时，如何关闭此导航栏？

Question

当用户点击链接浏览网站时，导航栏没有关闭？

我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！ 此外，处于活动位置（即 X）的 hamberberger 菜单图标也没有很好地对齐。但主要问题是点击时导航栏会折叠。

$(document).ready(function() {
  $('.container').click(function() {
    $('.navbar .menu').toggleClass("active");
  });
});
function myFunction(x) {
x.classList.toggle("change");
}
        

@media (max-width: 1104px) {
.about .about-content .left img {
    height: 350px;
    width: 350px;
}
}

@media (max-width: 991px) {
.max-width {
    padding: 0 50px;
}
}

@media (max-width: 947px) {
.menu-btn {
    display: block;
    z-index: 999;
}
/* .menu-btn i.active:before {
    content: "\f00d";
} */
.navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #111;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
}
.navbar .menu.active {
    left: 0;
}
.navbar .menu li {
    display: block;
}
.navbar .menu li a {
    font-family: 'Josefin Sans', sans-serif;
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
}
}
.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 30px 0;
  font-family: 'Ubuntu', sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: crimson;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  position: relative;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  border: 3px solid #fff;
  padding: 0px 10px;
  text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
  letter-spacing: 2px;
}

.navbar .logo a::after {
  content: 'PANDEY';
  position: absolute;
  font-size: 15px;
  font-weight: bold;
  bottom: -12px;
  /* color: crimson; */
  right: 15px;
  background: crimson;
  border-radius: 5px;
  /* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
  padding: 0px 4px;
  letter-spacing: 2px;
}

.navbar .logo a span {
  color: crimson;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a::after {
  border-radius: 4px;
  background: #fff;
  color: crimson;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}

.container {
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
}

.bar1 {
  width: 35px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar2 {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar3 {
  width: 15px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -6px) rotate(40deg);
  width: 35px;
}

.navbar.sticky .logo a span {
  color: #fff;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  font-family: 'Josefin Sans', sans-serif;
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  position: relative;
  color: #fff;
}

.navbar.sticky .menu li a:hover {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1  /jquery.min.js"></script>
<nav class="navbar">
  <div class="max-width">
    <div class="logo"><a href="#">Chhailbihari</a></div>
    <ul class="menu">
      <li class="menu-btn"><a href="#home">Home</a></li>
      <li class="menu-btn"><a href="#about">About</a></li>
      <li class="menu-btn"><a href="#services">Services</a></li>
      <li class="menu-btn"><a href="#skills">Skills</a></li>
      <li class="menu-btn"><a href="#contact">Contact</a></li>
    </ul>
    <div class="menu-btn">
      <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
    </div>
  </div>
</nav>