單擊導航鏈接時，如何縮短關閉導航的代碼

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

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

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

你的代碼很好。 但需要一些修復。 像這樣：

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

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

Answer 3

您可以 select 並使用一個選擇器綁定多個類。 （兩個塊都在做同樣的事情）

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