Close hamburger menu when a link inside of it is clicked

Question

Following problem: When you click on the sandwich/hamburger menu icon,a menu is opened. That works already. What I am trying to achieve now is when you click on a menu item, the whole menu should close and reveal the site in the background. The links load into a div via a script, so you won't be leaving the actual site.

Important: this whole sandwich menu is done with a checkbox .. I tried copying some premade scripts that uncheck it but it just won't work. Help would be appreciated.

Code:

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

Your welcome! 🤠

$(".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>