Hide Navbar on mobile after a link is clicked-CodePudding

I'm building a small website and I'd like to hide the mobile navbar after a link is clicked. I've found some similar questions in this forum: tried hide() and slideup() but it works for the very first link clicked, then I can't re-open my navbar.

The idea is to automatically close the navbar once a link is clicked to simplify and make the website more pleasant.

Here the html of my navbar:

<nav >
    <div >
        <button type="button"  data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
          <span >Toggle navigation</span>
          <span ></span>
          <span ></span>
          <span ></span>
        </button>

      <div  id="navbar-collapse">
        <ul >
          <li><a  href="./index.html" title="">01 : Home</a></li>
          <li><a  href="#thedavid" title="">02 : The Project</a></li>
          <li><a  href="#aboutus" title="">03 : About us</a></li>
          <li><a  href="#roadmap" title="">04 : Our Goal</a></li>
          <li><a  href="#faq" title="">05 : Faq</a></li>
        </ul>


      </div> 
    </div>
  </nav>

CodePudding user response：

document.getElementById('sr-only').addEventListener('click',myFunction)

function myFunction(){
   let nav=document.getElementById('navbar-collapse')
   if(nav.style.display=="" || nav.style.display=='block')
   nav.style.display = 'none'
   else nav.style.display='block'
   }

<nav >
    <div >
        <button type="button"  data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
          <span id="sr-only">Toggle navigation</span>
          <span ></span>
          <span ></span>
          <span ></span>
        </button>

      <div  id="navbar-collapse">
        <ul >
          <li><a  href="./index.html" title="">01 : Home</a></li>
          <li><a  href="#thedavid" title="">02 : The Project</a></li>
          <li><a  href="#aboutus" title="">03 : About us</a></li>
          <li><a  href="#roadmap" title="">04 : Our Goal</a></li>
          <li><a  href="#faq" title="">05 : Faq</a></li>
        </ul>


      </div> 
    </div>
  </nav>

CodePudding user response：

function toggleNavBar(event) {
    var navBar = document.getElementById('navbar-collapse');
    if (navBar.style.display === 'none') {
      navBar.style.display = 'block';
    } else {
      navBar.style.display = 'none';
    }
}

var navBar = document.getElementById('navbar-collapse');
navBar.addEventListener('click', toggleNavBar);

    <nav >
        <div >
            <button type="button"  data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" onclick="toggleNavBar(event)">
              <span >Toggle navigation</span>
              <span ></span>
              <span ></span>
              <span ></span>
            </button>

          <div  id="navbar-collapse">
            <ul >
              <li><a  href="./index.html" title="">01 : Home</a></li>
              <li><a  href="#thedavid" title="">02 : The Project</a></li>
              <li><a  href="#aboutus" title="">03 : About us</a></li>
              <li><a  href="#roadmap" title="">04 : Our Goal</a></li>
              <li><a  href="#faq" title="">05 : Faq</a></li>
            </ul>


          </div> 
        </div>
      </nav>