How to close JS menu by clicking the link?

So, I'm trying to make a mobile / pc menu, that by clicking the icon it occupies the whole screen, and when scrolling the page and it goes together .. And for that, I used some fixed functions in css, so far it's okay. Only when I use the fixed option, what was it to appear to close X does not appear. Anyway ... this does not matter much now, what I want to know is that if someone can help me by looking at this code, so that when the user clicks on any of the links, close the menu and go to the desired part of the anchor ..

HERE IS THE CSS FOR THOSE WHO WANT TO SIMULATE THE BEHAVIOR.

OBS: I put @media (max-width 2000px;) intentionally, that later I did it, it was just to debug! PERSONAL NOW I CAN DO WITH WHAT THE MENU FILLED BY CLICKING ON THE LINK, BUT AFTER DOING THAT, WHEN CLICKING TOGGLE AGAIN, IT DOES NOT FUN, IT IS ONLY F5

nav {
      width: 100%;
      background: #000;
      height: 70px;
      position: fixed;
      z-index: 1;
}

nav #brand {
      float: left;
      display: block;
      margin-left: 84px;
      font-size: 30px;
      line-height: 70px;
      font-weight: bold;
}

nav #brand a {
      color: #fff;
      transition: all 0.3s ease-out;
      font-family: "Poppins";
      font-weight: 300;
}

nav #menu {
      float: left;
      left: 50%;
      position: fixed;
}

nav #menu li {
      display: inline-block;
      padding: 0px 30px;
      cursor: pointer;
      line-height: 70px;
      position: fixed;
      transition: all 0.3s ease-out;
}

nav #menu li a {
      color: #fff;
      font-family: "Poppins";
      font-weight: 200;
}

#toggle {
      position: fixed;
      right: 20px;
      top: 14px;
      z-index: 999;
      width: 40px;
      height: 40px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
}

#toggle .span {
      height: 3px;
      background: #fff;
      transition: all 0.3s ease-out;
      backface-visibility: hidden;
      margin: 5px auto;
}

#toggle.on #one {
      transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
      opacity: 0;
}

#toggle.on #three {
      transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

#resize {
      z-index: 1;
      top: 0px;
      position: fixed;
      background: #000;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
      display: table;
}

#resize #menu {
      height: 90px;
      display: table-cell;
      vertical-align: center;
}

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

#resize li:nth-child(1) {
      margin-top:140px;
}

#resize #menu li a {
      color: #fff;
}

#resize.active {
      visibility: visible;
      opacity: 0.99;
}


@media(max-width: 2000px) {
      #toggle {
            visibility: visible;
            opacity: 1;
            margin-top: 6px;
      }

      nav #brand {
            margin-left: 18px;
      }

      #menu a {
            font-family: "Poppins";
            font-weight: 200;
            font-size: 20px;
      }

      nav #menu {
            display: none;
      }
}

@media(min-width: 2000px) {
      #resize {
            visibility: hidden !important;
      }
}


<nav style="background: none;">
            <ul id="menu">
                  <li><a>Voltar</a></li>
                  <li ><a href="#blog">Blog</a></li>
                  <li><a href="#sobre">Sobre</a></li>
                  <li><a href="#oportunidades">Oportunidades</a></li>
                  <li><a href="#agenda">Agenda</a></li>
                  <li><a href="#time">Time de Campeões</a></li>
                  <li><a href="#trabalhe">Trrabalhe Comigo</a></li>
                  <li><a href="#ministerio">Ministério</a></li>

            </ul>

            <div style="float: left !important;" id="toggle">
                  <div style="border: 1px #000 solid;" class="span" id="one"></div>
                  <div style="border: 1px #000 solid" class="span" id="two"></div>
                  <div style="border: 1px #000 solid" class="span" id="three"></div>
            </div>
      </nav>

      <div style="" id="resize">

            <ul id="menu">
                  <li><a href="">Voltar</a></li>
                  <li style="height: 5px;"><a href="#blog">Blog</a></li>
                  <li style="height: 5px;"><a href="#sobre">Sobre</a></li>
                  <li style="height: 5px;"><a href="#oportunidade">Agenda</a></li>
                  <li style="height: 5px;"><a href="#agenda">Ministério</a></li>
                  <li style="height: 5px;"><a href="#time">Oportunidade</a></li>
                  <li style="height: 5px;"><a href="#trabalhe">Trabalhe Comigo</a></li>
                  <li style="height: 5px;"><a href="#ministerio">Time de Campeões</a></li>
            </ul>
      </div>



      <script>

    $("#toggle").click(function() {

        $(this).toggleClass('on');
        $("#resize").toggleClass("active");

        $('#menu a').click(function(){ $('#resize').toggleClass("d"); });
    });



  </script>