当我从菜单中单击链接标记时，如何使导航栏消失

Question

I have this navbar it works how I want it too but my main problem is I want the dropdown menu to disappear by clicking any links on the menu because I am not sure what to add to my current code to get it to behave as desired. Thanks any help would be appreciated

<nav id="navbar">
    <div class="logo">
         <a href="#zero"><img src="log.png"></a>
    </div>

    <ul>
        <li><a href="#lowerSec" class="active">About</a></li>
  <li><a href="#container">Contact</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Home</a></li>

    </ul>
</nav>

Here is my JS

It works fine I just one the additional feature that I mentioned on the title since I don't know how to do it

    <script type="text/javascript">

    $(window).on('scroll', function()
   {

    if($(window).scrollTop())
   {
     $('nav').addClass('black');
    }

   else
   {
     $('nav').removeClass('black');
   }
   }
   )

   $(document).ready(function() {
   $(".menu").on("click", function() {
   $("nav ul").toggleClass("active");
   });
  })

Answer 1

A CSS styling may be a potential solution. all tags are displayed as blocks so in your CSS file add

    .makeDisappear{
    display:none
    }

Although, I do recommend renaming your id for your navbar something a bit more unique.

so example jQuery would be:

$("a").on("click",function(){
document.getElementById("navbar").classList.add("makeDisappear");

//or simply $("#navbar").addClass("makeDisappear")
})

to make your nav bar reappear change display:none to display:block

Answer 2

Just add the nav ul li a to your click function. Since I don't know what your markup looks like here is a quick demo:

 $(".menu, nav ul li a").on("click", function(e) { e.preventDefault(); $("nav ul").toggleClass("active"); }); 

 ul{ display:none; } ul.active{ display:block; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <nav> <button class="menu"> Menu </button> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> 

With jquery you can comma separate selectors. Since you already have the functionality to toggle the active class just add the nav ul li a to your existing function.