ハンバーガーメニューの閉じ方

Question

ページ内リンクのハンバーガーメニューをメニュー選択後に閉じたいのですが、クリック後でも✖️をクリックしないと閉じません。
自動的に閉じる方法を知りたいです。

該当のソースコード

<div class="navBtn sp">
    <div class="navBtn__inner">
      <span></span><span></span><span></span>
    </div>
  </div>
</div>
<nav class="nav inner">
  <ul>
    <li><a href="/#merit">HOME</a></li>
    <li><a href="/#menu">メニュー</a></li>
    <li><a href="/#voice">お客様の声</a></li>
    <li><a href="/#media">メディア</a></li>
    <li><a href="/#sns">各種リンク・SNS</a></li>
    <li><a href="/#access">アクセス</a></li>
    <li><a href="/#inquiry">予約・お問い合わせ</a></li>
  </ul>
</nav>

ナビ
--------------------*/
.nav {
  width: 100%; }
  @media screen and (max-width: 768px) {
    .nav {
      padding-top: 2%;
      padding-bottom: 2%;
      width: 80%;
      height: 100vh;
      background-image: url("../images/bg_01.jpg");
      transform: translateX(100%);
      transition: all 0.5s;
      position: absolute;
      right: 0; } }
  @media screen and (max-width: 768px) {
    .nav.open {
      transform: translateX(0%); } }
  @media screen and (min-width: 769px) {
    .nav {
      background-color: #fff; } }
  .nav ul {
    width: 100%; }
    @media screen and (min-width: 769px) {
      .nav ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px; } }
  @media screen and (max-width: 768px) {
    .nav li {
      border-bottom: 1px solid #ab987a; } }
  @media screen and (min-width: 769px) {
    .nav li {
      text-align: center;
      padding: 0.5em 1.75em;
      display: flex; }
      .nav li:not(:last-of-type) {
        border-right: 1px solid #ab987a; } }
  @media screen and (min-width: 769px) {
    .nav li:first-of-type {
      padding-left: 0; } }
  @media screen and (min-width: 769px) {
    .nav li:last-of-type {
      padding-right: 0; } }
  .nav li a {
    display: block;
    color: #350c03;
    position: relative; }
    @media screen and (max-width: 768px) {
      .nav li a {
        padding: 0.8em 0; } }
    @media screen and (min-width: 769px) {
      .nav li a:before {
        position: absolute;
        left: 0;
        bottom: -1em;
        transition: background-color 0.3s;
        -webkit-transition: background-color 0.3s; }
      .nav li a:hover {
        color: #ff533d; }
        .nav li a:hover:before {
          content: '';
          background-color: #ff533d;
          position: absolute;
          left: 0;
          bottom: -1em;
          width: 100%;
          height: 2px;
          animation: bgChange 0.3s;
          -webkit-animation: bgChange 0.3s; } }

.navBtn {
  cursor: pointer;
  z-index: 999;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 6px; }
  .navBtn__inner {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    background: transparent;
    text-align: center; }
  .navBtn span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #ff533d;
    -webkit-transition: 0.35s ease-in-out;
    -moz-transition: 0.35s ease-in-out;
    transition: 0.35s ease-in-out;
    left: 6px; }
    .navBtn span:nth-of-type(1) {
      top: 9px; }
    .navBtn span:nth-of-type(2) {
      top: 18px; }
    .navBtn span:nth-of-type(3) {
      top: 27px; }
  .navBtn.active span:nth-of-type(1) {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    top: 18px; }
  .navBtn.active span:nth-of-type(2) {
    display: none; }
  .navBtn.active span:nth-of-type(3) {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: 18px; }

function spMenu() {
  /*ハンバーガーメニュー*/
  var winWidth = $(window).width(),
    winM = 768
  var nav = $('.nav'),
    navBtn = $('.navBtn')
  if (winWidth <= winM) {
    navBtn.click(function () {
      $(this).toggleClass('active')

      if ($(this).hasClass('active')) {
        nav.addClass('open')
      } else {
        nav.removeClass('hide')
      }
    })
  }
}

function closeMenu() {
  $('.nav').removeClass('open')
  $('.navBtn').removeClass('active')
}

function smoothScroll() {
  var notList = ''
  $('a[href^="#"]')
    .not(notList)
    .click(function () {
      var speed = 800,
        href = $(this).attr('href'),
        target = $(href == '#' || href == '' ? 'html' : href)
      if (winWidth <= winM) {
        headH = $('.header').outerHeight()
      } else {
        headH = $('header').outerHeight()
      }
      var position = target.offset().top - headH
      $('body,html').animate(
        {
          scrollTop: position,
        },
        speed,
        'swing',
      )
      return false
    })
}

試したこと

補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

コードはマークダウンのcodeにてご提示ください

[yambejp]

ご提示のjsはそもそもなにも機能していないのでは？
またCSSで調整しているならそれも提示されたほうが良いと思います

[yambejp]

ソースが肥大化しているのでどこか動作が確認できるサイトに
アップしてもらえないですか？

Answer 1

現状を再現できないので違うかもしれませんが、下記を追加でどうでしょう。
リンクをクリックした時、作成されているcloseMenuを実行する処理です。

$(function(){
	$('.nav a').on('click', closeMenu);
});