JQuery：打開/關閉菜單，打開但不關閉

Question

我試圖做一個菜單，隱藏在左側，當我們點擊它打開或關閉的按鈕。我有下面的代碼，但菜單剛剛打開，關閉的代碼不起作用，有人對我做錯了什麼有線索。

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); 

這工作