当点击汉堡包菜单中的链接时关闭汉堡包菜单

Question

以下问题:当你点击三明治/汉堡包菜单图标时，会打开一个菜单。这已经起作用了。我现在想要实现的是，当你点击一个菜单项，整个菜单应该关闭，并在后台显示网站。链接通过脚本加载到div中，因此您不会离开实际的站点。

重要:这整个三明治菜单是由一个复选框完成的。我试着复制一些预先制作的脚本，取消检查，但它不会工作。如果你能帮忙，我将不胜感激。

代码:

HTML:

 <div class="menu-wrap">
      <input type="checkbox" class="toggler">
      <div class="hamburger">
        <div></div>
      </div>
      <div class="menu">
        <div>
          <ul>
    <li><a href="#">Home</a>
    <li><a class="filter-check-btn" href="#" 
    onclick="load('/about.html');uncheck();">Projects</a>
    <li><a href="#">About</a>
          </ul>
        </div>
      </div>
    </div>

CSS:

.menu {
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(0 0 0);
  height: 100vh;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: all 0.2s ease;
}
.menu > div {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
.menu ul {
  list-style: none;
    padding:0;
}
.menu li {
  padding: 1rem 0;
}
.menu > div a {
  text-decoration: none;
  color: #fafafa;
  font-size: 1.5rem;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
   padding-bottom: 15px;
   text-indent: -20px;
    direction: rtl;
    display: inline-block;
}
.menu a:hover {
  color: rgb(230, 177, 177);
      transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28)
    text-indent: -20px;
    direction: rtl;
    display: inline-block;
}
    
    .menu-wrap .toggler:checked ~ .menu {
    opacity: 1;
    width: 100vw;
    transition: all 0.2s ease-out;
}
    
.menu-wrap .toggler {
    position: absolute;
    top: 30px;
    left: 30px;
    }
    
    .menu-wrap .hamburger > div {background:black; 
height:2.5px!important;}
    .menu-wrap .hamburger > div::before {background:black;}
        .menu-wrap .hamburger > div::after {background:black;}
    
.menu-wrap .toggler:checked ~ .hamburger > div 
{background:white;}
    .menu-wrap .toggler:checked ~ .hamburger > div::before 
{background:white;}
    .menu-wrap .toggler:checked ~ .hamburger > div::after 
{background:white;}

JS/JQUERY:

$(".filter-check-btn").on('click', function() {
    $(this).toggleClass('active');
    if ($(this).hasClass("active"))
    $(this).parent().parent().find(".toggler").prop('checked', true);
    else
    $(this).parent().parent().find(".toggler").prop('checked', false);
});

Answer 1

欢迎光临!🤠

$(".filter-check-btn").on('click', function() {
    $(this).toggleClass('active');
    if ($(this).hasClass("active"))
    $(this).parent().parent().find(".toggler").prop('checked', true);
    else
    $(this).parent().parent().find(".toggler").prop('checked', false);
});
$(".menu a").on('click', function() {
    $(".toggler").prop('checked', false);
});

.menu {
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(0 0 0);
  height: 100vh;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: all 0.2s ease;
}
.menu > div {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
.menu ul {
  list-style: none;
    padding:0;
}
.menu li {
  padding: 1rem 0;
}
.menu > div a {
  text-decoration: none;
  color: #fafafa;
  font-size: 1.5rem;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
   padding-bottom: 15px;
   text-indent: -20px;
    direction: rtl;
    display: inline-block;
}
.menu a:hover {
  color: rgb(230, 177, 177);
      transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28)
    text-indent: -20px;
    direction: rtl;
    display: inline-block;
}
    
    .menu-wrap .toggler:checked ~ .menu {
    opacity: 1;
    width: 100vw;
    transition: all 0.2s ease-out;
}
    
.menu-wrap .toggler {
    position: absolute;
    top: 30px;
    left: 30px;
    }
    
    .menu-wrap .hamburger > div {background:black; 
height:2.5px!important;}
    .menu-wrap .hamburger > div::before {background:black;}
        .menu-wrap .hamburger > div::after {background:black;}
    
.menu-wrap .toggler:checked ~ .hamburger > div 
{background:white;}
    .menu-wrap .toggler:checked ~ .hamburger > div::before 
{background:white;}
    .menu-wrap .toggler:checked ~ .hamburger > div::after 
{background:white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-wrap">
      <input type="checkbox" class="toggler">
      <div class="hamburger">
        <div></div>
      </div>
      <div class="menu">
        <div>
          <ul>
    <li><a href="#">Home</a>
    <li><a class="filter-check-btn" href="#" 
    onclick="load('/about.html');uncheck();">Projects</a>
    <li><a href="#">About</a>
          </ul>
        </div>
      </div>
    </div>