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 class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ">
<li><a class="click" href="./index.html" title="">01 : Home</a></li>
<li><a class="click" href="#thedavid" title="">02 : The Project</a></li>
<li><a class="click" href="#aboutus" title="">03 : About us</a></li>
<li><a class="click" href="#roadmap" title="">04 : Our Goal</a></li>
<li><a class="click" href="#faq" title="">05 : Faq</a></li>
</ul>
</div>
</div>
</nav>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 class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span id="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ">
<li><a class="click" href="./index.html" title="">01 : Home</a></li>
<li><a class="click" href="#thedavid" title="">02 : The Project</a></li>
<li><a class="click" href="#aboutus" title="">03 : About us</a></li>
<li><a class="click" href="#roadmap" title="">04 : Our Goal</a></li>
<li><a class="click" href="#faq" title="">05 : Faq</a></li>
</ul>
</div>
</div>
</nav>