Buenas tardes,
Tengo el siguiente navbar:
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav>
Cuando hago clic sobre una opción del menú, por ejemplo: About mediante jQuery muestro un <div> oculto. El problema es que no se cierra el menú desplegable; es decir, cuando hago click en cualquiera de los links del desplegable, debe cerrarse el menú desplegable, y cuando pulse sobre el toggle, que vuelva a mostrar el menú desplegable.
Muchas gracias,
Respuestas
El código HTML que muestras parece correcto. ¿Puede ser algún error de JavaScript? Mira en la consola del navegador a ver si ves algún error o warning. ¿Estás enlazando el archivo JavaScript completo o solo los plugins que utilizas?
Por otra parte, también puedes cerrar/abrir los desplegables mediante código JavaScript. Así que podrías añadir lo siguiente en tu código para que se ejecute después del evento click de cualquier elemento del menú:
$('.navbar-collapse').collapse('hide');
@javiereguiluz
Qué bien, llevaba un par de semanas atascado, con la instrucción jquery que me has puesto funciona perfectamente.
Muchísimas gracias,
@eladerezador