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

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

而且，您还可以进一步缩短该时间，因为当您将一个函数传递给JQuery对象时，这意味着该函数应该在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

您可以使用一个选择器选择和绑定多个类。(两个块都在做同样的事情)

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