Tengo este fragmento de código para mi sitio web personal que usa JavaScript para activar el menú Hamburguesa. Sin embargo, no funciona y no estoy seguro de por qué. El otro JS en mi código no funciona.
Aquí está el código:
var navbar = document.getElementById(".navbarNav"); function hideShow() { if (navbar.style.display == "block") { navbar.style.display = "hideShow()"; } else { navbar.style.display = "block"; } }
<nav class="navbar navbar-expand-lg navbar-light"> <div class="container-fluid"> <a class="navbar-brand" href="index.html">Edward Wynman</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="courses.html">Courses</a> </li> <li class="nav-item"> <a class="nav-link" href="projects.html">Projects</a> <li class="nav-item"> <a class="nav-link" href="/Files/EddieReume.pdf">Resume</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> </ul> </div> </div> </div> </nav>
Avíseme si necesita algo más como el CSS u otro código.
Mirando su marcado, ¿está tratando de usar Bootstrap? En su código puedo ver atributos de datos como data-bs-toggle
que indican que usted es. Si es así, asegúrese de estar utilizando losarchivos JavaScript y CSS necesarios para que esto funcione.
Con eso agregado, funciona con su código, no se necesita JS personalizado (capturas de pantalla a continuación)
Su código funcionando se puede ver aquí
Si desea saber cómo crear un bit personalizado de JS para activar esto, comente y actualizaré mi respuesta en consecuencia.
Respuesta final
var navbar = document.getElementById("navbarNav"); function hideShow() { console.log("click") if (navbar.style.display == "block") { navbar.style.display = "none"; console.log("disapper") } else { navbar.style.display = "block"; console.log("visible") } }
cuando esté usando getElementById() no use .(dot) para definir el atributo Id.
var navbar = document.getElementById("navbarNav"); // var navbar =document.getElementById("navbarNav"); or // let navbar=document.querySelector('#navbarNav'); this method also work. function hideShow() { if (navbar.style.display == "block") { navbar.style.display = "hideShow()"; } else { navbar.style.display = "block"; } }