Как я могу сократить этот код, который закрывает навигацию при нажатии на навигационную ссылку

Question

Это прекрасно работает, первая часть заставляет мою навигацию открываться / закрываться при нажатии на гамбургер, а вторая часть кода закрывает навигацию при нажатии на навигационную ссылку. Все звучит великолепно, и, похоже, с этим нет проблем ... однако, будучи полным новичком в JavaScript, я просто задавался вопросом, можете ли вы сделать это, не вызывая document.ready дважды?

$(document).ready(function(){
    $('.nav-button').click(function(){
    $('body').toggleClass('nav-open');
    });
});


 $(document).ready(function(){
   $('.nav-link').click(function(){
     $('body').toggleClass('nav-open');
   });
 });

my html;

<a class="nav-button ml-auto">
<span id="nav-icon3"><span></span><span></span><span></span><span></span></span></a>
<div class="fixed-top main-menu">
   <div class="flex-center p-5">
      <ul class="nav flex-column">
         <li class="pb-3">
            <span class="nav-text">Where to next?</span>
         </li>
         <li class="nav-item delay-1"><a class="nav-link" href="#when">When & Where</a>
         </li>
         <li class="nav-item delay-2"><a class="nav-link" href="#info">About Us</a></li>
         <li class="nav-item delay-3"><a class="nav-link" href="#timetable">Timetable</a>
         </li>
         <li class="nav-item delay-4"><a class="nav-link" href="#photogallery">Photo
            Gallery</a>
         </li>
      </ul>
   </div>
</div>

Answer 1

Вы можете не только поместить оба обработчика событий в один document.ready(), но, поскольку они оба делают одно и то же, вам также не нужно повторять этот код. Вы можете просто указать второй селектор, разделенный запятыми, который позволит затронуть и эти элементы. , подразумевается, что эта функция должна выполняться на document.ready():

$(function(){
    $('.nav-button, .nav-link').click(function(){
      $('body').toggleClass('nav-open');
    });
});

Answer 2

Вы можете выбрать и связать несколько классов с помощью одного селектора. (оба блока делают одно и то же)

     $(document).ready(function(){
       $('.nav-button, .nav-link').click(function(){
         $('body').toggleClass('nav-open');
       });
     });

Answer 3

Ваш код в порядке. Но нужно исправить. Как это:

$(document).ready(function () {
  $('.nav-button').click(function () {
     $('body').toggleClass('nav-open');
  });

  $('.nav-link').click(function () {
     $('body').toggleClass('nav-open');
  });
});