0

Me encuentro con un proyecto con HTML, CSS y JavaScript, estoy utilizando la librería de materialize, y quiero ocultar el sidenav en el momento en que llamo a una función o en la propia función de cerrar sesión del usuario. Mi código en JavaScript es el siguiente:

mostrarNav:function(nickAlumno){
  $('#logoSide').remove();
  var cadena= '<li id="inicio_d"><a href="#" onclick="app.pantallaAlumno();">Inicio</a></li><li id="resultados_d"><a href="#">Resultados</a></li><li id="cerrar_d"><a href="#" onclick="app.cerrarSesion();">Cerrar Sesión</a></li>';
  var cadena2= '<a href="#" id="logoSide" class="sidenav-trigger" data-target="mobile-nav"><i class="material-icons">menu</i></a>';
  var cadena3='<li><div class="user-view"><div class="background"><img src="cliente-apache/img/pizarra-800x478.jpg"></div><a href="#user"><img src="cliente-apache/img/user.png" style="width:20%"></a><span class="white-text name">'+nickAlumno+'</span></div></li>';
  cadena3= cadena3+'<li ><a href="#" onclick="app.pantallaAlumno();">Inicio</a></li><li ><a href="#">Resultados</a></li><li><div class="divider"></div></li><li ><a href="#" onclick="app.cerrarSesion();">Cerrar Sesión</a></li>';
  $('#navBar').append(cadena);
  $('#navSide').append(cadena2);
  $('#mobile-nav').append(cadena3);

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });
},

cerrarSesion:function(){
  if (window.localStorage.getItem('alu')!=undefined){
    window.localStorage.removeItem("alu");
    app.formLogin();  

  }
},

En esta parte estaría el sidenav y la función donde me gustaría que se ocultara (cerrar Sesión). He probado a hacer un remove, pero a la hora de volver a iniciar sesión me sobrescribe el contenido. El código en HTML es este:

<nav class="blue" style="padding: 0px 10px;">
    <div class="nav-wrapper" id="navSide">
        <a href="#" class="brand-logo">EDUCA</a>
        <ul class="right hide-on-med-and-down" id="navBar"></ul>
    </div>
</nav>
<ul class="sidenav" id="mobile-nav"></ul>
2
  • Cuando se ejecuta la función? un onClick, al iniciar el documento? Commented el 1 abr. 2019 a las 13:01
  • Si, se trata de un onClick que se encuentra en el propio sidenav. Es decir, una de las filas del sidenav es cerrarSesion, por tanto al darle se debe salir de la sesión y ocultar Commented el 1 abr. 2019 a las 15:35

1 respuesta 1

2

Saludos puedes usar algo de javascript:

cerrarSesion:function(){
  //ocultar sidenav
  sideNav = document.getElementById('mobile-nav');
  sideNav.style.display = 'none';
  ...
  ..

},

Si prefieres usa Jquery:

$("#mobile-nav").hide();

Espero te sirva y suerte..!!

4
  • Buenas, muchas gracias por comentar. He probado a hacerlo, y el problema es que al salir me lo oculta, pero al volver a entrar sigue estando oculto. ¿Existe la función contraria al hide? Commented el 1 abr. 2019 a las 15:39
  • 1
    en efecto para ello si usas Jquery... colocal "$("#ID).show();" Commented el 1 abr. 2019 a las 15:40
  • Vale, he probado justo eso. Y lo hace bien. Pero hay otro problema, pues al volver a entrar lo que sucede es que me duplica lo que tenía en el sidenav. Es decir, si tengo (inicio, resultados y cerrar sesión), me lo vuelve a poner abajo repetido Commented el 1 abr. 2019 a las 15:43
  • 1
    Ya está solucionado, he añadido un id a cada una de las etiquetas <li> del sidenav, y en la función mostrarNav, al comienzo hago $("#ID).remove(); Muchas gracias por la ayuda. Commented el 1 abr. 2019 a las 15:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.