Me encuentro con una aplicación híbrida realizada en HTML
, CSS
y JavaScript
, estoy con el menú superior, que lo he hecho responsive
, de forma que en el móvil se vea como un desplegable, el problema es que al pulsar sobre un elemento del menú, no se cierra después, a menos que le de yo a cerrar. De la misma forma, si se pulsa fuera de él tampoco se cierra, y también debería.
El menú lo tengo administrado en dos archivos, en uno defino el navbar
, y en el otro pongo los elementos del navbar
. En resumen, debería de cerrar el menú al pulsar sobre un elemento del mismo, o al pulsar fuera de el.
Os dejo aquí el código, gracias de antemano:
Index.html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#" id="ini1" onclick="comprobarUsuario();">tecnología</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarColor01" style="">
<ul class="navbar-nav ml-auto" id="inicio">
</ul>
</div>
</nav>
Control.js:
function mostrarNavLogout(){
var strLogout = '<li class="nav-item"><a class="nav-link" href="#" onclick="com.obtenerAlumnos();"><span class="glyphicon glyphicon-log-out"></span>Alumnos</a></li>';
strLogout= strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="com.obtenerProfesores();"><span class="glyphicon glyphicon-user"></span>Profesores</a></li>';
strLogout= strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="abandonar();"><span class="glyphicon glyphicon-user"></span>Abandonar partida</a></li>';
strLogout = strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="mostrarActualizarEliminar();"><span class="glyphicon glyphicon-user"></span>Modificar perfil</a></li>';
strLogout = strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="reset();"><span class="glyphicon glyphicon-log-out"></span>Salir</a></li>';
$('#inicio li').remove();
$('#inicio').append(strLogout);
}