JQuery: Öffnen/Schließen-Menü, Öffnet, schließt sich aber nicht

Question

Ich versuche ein Menü zu erstellen, das auf der linken Seite versteckt ist, und wenn wir auf die Schaltfläche klicken, wird es geöffnet oder geschlossen. Ich habe den folgenden Code, aber das Menü öffnet sich nur, der Code zum Schließen funktioniert nicht, hat jemand eine Ahnung, was ich falsch gemacht habe?

var menu = function() { 
 

 
    /* Open Menu*/ 
 

 
    $('.js_open_seta').click(function() { 
 
    $('.js_menu').animate({ 
 
     left: "0px" 
 
    }, 200); 
 

 
    $(".js_open_seta").addClass("js_close_seta"); 
 
    $(".js_open_seta").removeClass("js_open_seta"); 
 
    
 
    }); 
 

 
    /* Close Menu*/ 
 

 
    $('.js_close_seta').click(function() { 
 
    $('.js_menu').animate({ 
 
     left: "-240px" 
 
    }, 200); 
 

 
    $(".js_close_seta").addClass("js_open_seta"); 
 
    $(".js_close_seta").removeClass("js_close_seta"); 
 

 
    }); 
 

 
}; 
 

 
$(document).ready(menu);

body{ 
 
\t background: url("imagens/exp.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: 1280px 800px; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t border: 0; 
 
} 
 

 
.js_menu{ 
 
\t background: #4d4d4d; 
 
\t top: 0px; 
 
\t left: -240px; 
 
\t position: fixed; 
 
    \t width: 310px; 
 
\t height: 100%; 
 
\t text-align: center; 
 
\t font-family: 'Lato', sans-serif; 
 
\t color: #ffffff; 
 
\t z-index: 50; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t border: 0; 
 
} 
 

 
#js_exp, #js_open{ 
 
\t float: left; 
 
\t background: #4d4d4d; 
 
\t height: 100%; 
 
} 
 

 
#js_exp{ 
 
\t width: 240px; 
 
} 
 

 
#js_open{ 
 
\t border-left: #ff0000; 
 
\t width: 70px; 
 
\t text-align: center; 
 
\t vertical-align: middle; 
 
} 
 

 
#js_seta{ 
 
\t margin-top: 325px; 
 
\t width: 70px; 
 
\t height: 70px; 
 
}

 <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> 
 

 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
\t \t <nav class="js_menu"> 
 
\t \t \t <section id="js_exp"> 
 
\t \t \t \t <a href="#">SMPC</a> 
 
\t \t \t \t <a href="#">NGC Informática(2015)</a> 
 
\t \t \t \t <a href="#">NGC Informática (2015-2016)</a> 
 
\t \t \t </section> 
 

 
\t \t \t <section id="js_open"> 
 
\t \t \t \t <img src="http://vignette1.wikia.nocookie.net/ladygaga/images/4/40/Seta.png/revision/latest?cb=20110522223038&path-prefix=pt" class="js_open_seta" id="js_seta"/> 
 
\t \t \t </section> 
 
\t \t \t 
 
\t \t </nav> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t </div> 
 
\t \t

Answer 1

var menu = function() { 


    $('#js_seta').click(function() { 

    var check = $("#js_seta").hasClass("js_open_seta");   

     if(check) { 
      $('.js_menu').animate({ 
       left: "0px" 
      }, 200); 

      $(".js_open_seta").addClass("js_close_seta"); 
      $(".js_open_seta").removeClass("js_open_seta"); 

     } else { 
      $('.js_menu').animate({ 
       left: "-240px" 
      }, 200); 

      $(".js_close_seta").addClass("js_open_seta"); 
      $(".js_close_seta").removeClass("js_close_seta"); 

     } 

    }); 

}; 


$(document).ready(menu); 

Dies funktioniert