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

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>

Just put both functions inside one `$(document).ready( ... )` — Triby, Jul 14 '20 at 18:19

Scott Marcus · Accepted Answer · 2020-07-14T18:41:35.220

2

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

edited Jul 14 '20 at 18:41

answered Jul 14 '20 at 18:22

Scott Marcus

64,069
6
49
71

Yeah, this method is so simple and easier. This method better than my answer. – Minwoo Kim Jul 14 '20 at 18:25
I've tried this myself, and also tried copying your code, and it isn't working, the nav doesn't open at all. – Joshua Jul 14 '20 at 18:25
@ScottMarcus I think above code something wrong. I think $('.nav-button, .nav-link')... is correct code. – Minwoo Kim Jul 14 '20 at 18:29
@Joshua I had a small typo in my answer, try it again with the updated answer. – Scott Marcus Jul 14 '20 at 18:32
Great, the second solution is working perfectly, however I can't figure out why the top one isn't working with my code? Thanks for the explanation also, very useful as a beginner. – Joshua Jul 14 '20 at 18:33
@ScottMarcus Perfect, they both work, the first solution I did try myself, perhaps I made a typo also, I am very new, this is perfectly explained, and I learnt something new regarding the document.ready. Thanks a lot. – Joshua Jul 14 '20 at 18:37

score 0 · Answer 2 · answered Jul 14 '20 at 18:18

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

score 0 · Answer 3 · answered Jul 14 '20 at 18:28

0

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

answered Jul 14 '20 at 18:28

Avadh Vashisth

127
8

How is this any different than the answer I posted 5 minutes earlier? – Scott Marcus Jul 14 '20 at 18:29
@ScottMarcus You have to see https://stackoverflow.com/questions/10511897/assigning-more-than-one-class-for-one-event. It will be useful to you. – Minwoo Kim Jul 14 '20 at 18:32
@MinwooKim Why? What is it that you think I need to see? – Scott Marcus Jul 14 '20 at 18:33
@ScottMarcus Because asked what the difference was. But I may have misunderstood your question intent because I'm not good at English. – Minwoo Kim Jul 14 '20 at 18:38
@ScottMarcus This is the same as your answer, saw your post 5 minutes late. Busy figuring out how to make code different from the text. New to the community. :) – Avadh Vashisth Jul 14 '20 at 18:54

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

3 Answers3