单击其中的 link 时关闭汉堡菜单

Question

以下问题：当您单击 sandwich/hamburger 菜单图标时，将打开一个菜单。那已经有效了。我现在想要实现的是当您单击一个菜单项时，整个菜单应该关闭并在后台显示该站点。这些链接通过脚本加载到 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>

单击其中的 link 时关闭汉堡菜单

Close hamburger menu when a link inside of it is clicked

javascript

checkbox

hamburger-menu