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

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