单击导航链接时，如何缩短关闭导航的代码

Question

This works fine, the first part makes my navigation open/close when the Hamburger is clicked, and the second part of the code makes the navigation close when a nav-link is clicked. All sounds great, and there seems no issue with this... however as a complete beginner to JavaScript, I was just wondering if you can do this without calling document.ready twice?

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

Not only can you just put both event handlers in one document.ready() , but since they both do the same thing, you don't have to repeat that code either. You can just supply a comma separated second selector that will allow for those elements to be affected as well.

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

And, you can shorten this even further because when you pass a function to the JQuery object, it is implied that this function should run at document.ready() :

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

Answer 2

You're code is fine. But need some fix. Like this:

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

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

Answer 3

You can select and bind multiple classes using one selector. (both blocks are doing the same thing)

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