Как закрыть навигацию по гамбургеру при нажатии на теги <a>?

Question

Как гласит заголовок, я хочу, чтобы моя навигационная панель для гамбургеров закрывалась, когда я нажимал на теги. За последние пару часов я пробовал много способов, но не смог решить мою проблему?

Я пытался установить свойство hide () с помощью jquery, но не повезло, что это может быть связано с тем, что я новичок в JS и просто хочу закончить работу моего сайта.

const menuBtn = document.querySelector(".menu-btn");
const mobileContent = document.querySelector(".mobile-content");
const mobileItem = document.querySelector(".mobile-item");
const mobileItems = document.querySelectorAll(".mobile-items");


// Set Initial State Of Menu
let showMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu() {
  if (!showMenu) {
    menuBtn.classList.add("close");
    mobileContent.classList.add("show");
    mobileItem.classList.add("show");
    mobileItems.forEach(item => item.classList.add("show"));
    
    
 // Set Menu State
    showMenu = true;
  } else {
    menuBtn.classList.remove("close");
    mobileContent.classList.remove("show");
    mobileItem.classList.remove("show");
    mobileItems.forEach(item => item.classList.remove("show"));
    // Set Menu State
    showMenu = false;
  }
}

.mobile-nav {
  display: block;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 3;
}
.mobile-nav .menu-btn {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.mobile-nav .menu-btn .btn-line {
  width: 28px;
  height: 3px;
  margin: 0 0 5px 0;
  background: #333;
}

.mobile-content {
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 0.9;
  visibility: hidden;
}
.mobile-content.show {
  visibility: visible;
}
.mobile-content .mobile-item {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  float: right;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: blue;
  list-style: none;
  transform: translate3d(0, -100%, 0);
}
.mobile-content .mobile-link {
  display: inline-block;
  position: relative;
  font-size: 2rem;
  padding: 1rem 0;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

<!-- Mobile Nav -->
     <div class="mobile-nav">
       <div class="menu-btn">
         <div class="btn-line"></div>
         <div class="btn-line"></div>
         <div class="btn-line"></div>
       </div>
       <a href="#home"><h2>MATTY</h2></a>
       <nav class="mobile-content">
         <ul class="mobile-item">
           <li class="mobile-items">
             <a href="#about-me" class="mobile-link">
               ABOUT
             </a>
           </li>
           <li class="mobile-items">
             <a href="#the-portfolio" class="mobile-link">
               PORTFOLIO
             </a>
           </li>
           <li class="mobile-items">
             <a href="#" class="mobile-link">
               BLOG
             </a>
           </li>
           <li class="mobile-items">
             <a href="#contact-me" class="mobile-link">
               CONTACT
             </a>
           </li>
         </ul>
       </nav>
       </div>

Answer 1

Мне пришлось удалить часть вашего CSS, так как он не работал во фрагменте.

Рекомендую использовать element.classList.toggle(), как показано ниже.

Обратите внимание, насколько проще становится код.

РЕДАКТИРОВАТЬ: Нажав любой тег a теперь закроет меню

document.addEventListener("click", (e) => {
  if(e.target.matches('.menu-btn') 
  || e.target.matches('.btn-line')
  || e.target.matches('a')) {
    toggleMenu();
  }
});

function toggleMenu() {
  document.querySelector('.mobile-content').classList.toggle('hide');
}

.btn-line {
  display: block;
  width: 50px;
  margin: 5px;
  border: 2px solid black;
}

.mobile-nav {
  display: block;
  width: 100%;
  z-index: 3;
}

.mobile-content {
  position: fixed;
  width: 100%;
  opacity: 0.9;
}

.hide {
  display: none;
}

<!-- Mobile Nav -->
<div class="mobile-nav">
  <div class="menu-btn">
    <span class="btn-line"></span>
    <span class="btn-line"></span>
    <span class="btn-line"></span>
  </div>
  <a href="#home">
    <h2>MATTY</h2>
  </a>
  <nav class="mobile-content hide">
    <ul class="mobile-item">
      <li class="mobile-items">
        <a href="#about-me" class="mobile-link">
               ABOUT
             </a>
      </li>
      <li class="mobile-items">
        <a href="#the-portfolio" class="mobile-link">
               PORTFOLIO
             </a>
      </li>
      <li class="mobile-items">
        <a href="#" class="mobile-link">
               BLOG
             </a>
      </li>
      <li class="mobile-items">
        <a href="#contact-me" class="mobile-link">
               CONTACT
             </a>
      </li>
    </ul>
  </nav>
</div>

Answer 2

@ MPB Хороший способ разобраться в простом языке JQuery - это способ решить вашу проблему.Быстрый и простой способ создать хорошее меню Hamburger Navigation с помощью функции toggleClass(); в JQuery.Просто сделайте @keyframes-animation в неустановленном классе, и toggleClass(); будет легко переключаться между ними.Я делаю это все время, комментируйте, если вы хотите, чтобы я передал вам код для использования.