Estoy creando un sitio web pequeño y me gustaría ocultar la barra de navegación móvil después de hacer clic en un enlace. Encontré algunas preguntas similares en este foro: probé hide() y slideup() pero funciona para el primer enlace en el que se hace clic, luego no puedo volver a abrir mi barra de navegación.
La idea es cerrar automáticamente la barra de navegación una vez que se hace clic en un enlace para simplificar y hacer que el sitio web sea más agradable.
Aquí el html de mi barra de navegación:
<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>