CODEWITHSUNDEEP
javascripthtmljquery
Joshua
Joshua

Reputation: 25

How can I shorten this code that closes the navigation when a nav-link is clicked

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>

Upvotes: 0

Views: 53

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65806

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');
    });
});

Upvotes: 2

Avadh Vashisth
Avadh Vashisth

Reputation: 135

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');
       });
     });

Upvotes: 0

Minwoo Kim
Minwoo Kim

Reputation: 510

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');
  });
});

Upvotes: 0

Related Questions