1

Estoy haciendo que con un div se abra una especie de menú cambiando simplemente la propiedad CSS transform del mismo.

El asunto es que mi código solo se ejecuta una vez y por lo tanto el menú no se "Cierra", si no que solo se abre.

Espero haberme explicado. Aquí les dejo el código que he utilizado.

Js:

function callMenu () {

    var b;
    var i = document.getElementById("menu");

    if (b == 1) {

        document.getElementById("title").textContent = b;
        i.style.transform = "translateX(0%)";
        b = 0;

    } else {

        i.style.transform = "translateX(-100%)";
        b = 1;
        document.getElementById("title").textContent = b;
    }

}

Html:

<div class="container" onclick="callMenu()">
     <div class="bar1"></div>
     <div class="bar2"></div>
     <div class="bar3"></div>
</div>
1
  • El HTML no incluye un elemento con id "menu" ni id "title" pero los llamas en tu función, deberías incluirlos para cumplir con las pautas de ejemplo mínimo verificable.
    – Rubén
    el 12 abr. 2017 a las 23:07

3 respuestas 3

2

Estas usando una variable local a la función. El valor de b se pierde cada vez, por lo que no es que solo se ejecute una vez, es que siempre hace lo mismo.

Una posible solución: convierte la variable en global:

function callMenu( ) {
  var i = document.getElementById( "menu" );

  if( b == 1 ) {
  ...

Por supuesto, asegúrate de que no la usas en ningún otro sitio, o, mejor aún, cámbiale el nombre por otro mas descriptivo:

function callMenu( ) {
  var i = document.getElementById( "menu" );

  if( MenuYaMostrado == 1 ) {
  ...

Personalmente, me gusta cualificar por completo las variables globales. Toda variable global pertenece al objeto window, así que yo haría

function callMenu( ) {
  var i = document.getElementById( "menu" );

  if( window.MenuYaMostrado == 1 ) {
  ...
1

Eso es debido a que tienes la variable b dentro de tu función y por eso cada vez que llamas se reinicia en var b; ponla fuera de tu función y veras como funciona, usa también para hacer un debug de tu código, el console.log() para monitorear como lo hice en tu código:

var b;
function callMenu(){
console.log ("Valor de b: " + b);
    var i = document.getElementById("menu");
    if(b == 1)
       {
           document.getElementById("title").textContent = b;
           i.style.transform = "translateX(0%)";
           b = 0;
       }else{

           i.style.transform = "translateX(-100%)";
           b = 1;
           document.getElementById("title").textContent = b;
       }
 }
0

Al ejecutar la funcion siempre la variable b se inicializa. Por ende no se guarda el ultimo valor que se le asigno. Es decir siempre va a ser 0 cuando se ejecute la funcion y solo ejecutara abrir. Debes hacer que la variable sea global. Es decir que sea independiendte de la funcion. Tambien para evitar usar una variable puedes poner cono condicion que cumpla o no con una propiedad css. En jquery por ejemplo seria: if($(elemento).css(“display”) == “none”){ //quiere decir que esta cerrado }else{ // quiere decir que esta abierto }

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.