0
149
Views¿Por qué mi script no abre mi menú desplegable?
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.
3 answers
Answer question0
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.
0
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") } }0
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"; } }