簡體   English   中英

jQuery:打開/關閉菜單,打開但不關閉

[英]JQuery: Open/Close Menu, Opens but doesn't close

我正在嘗試做一個隱藏在左側的菜單,當我們單擊按鈕時,它會打開或關閉。 我有以下代碼,但菜單剛剛打開,關閉代碼不起作用,有人對我做錯了什么有一個線索?

 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{ background: url("imagens/exp.jpg"); background-repeat: no-repeat; background-size: 1280px 800px; padding: 0; margin: 0; border: 0; } .js_menu{ background: #4d4d4d; top: 0px; left: -240px; position: fixed; width: 310px; height: 100%; text-align: center; font-family: 'Lato', sans-serif; color: #ffffff; z-index: 50; padding: 0; margin: 0; border: 0; } #js_exp, #js_open{ float: left; background: #4d4d4d; height: 100%; } #js_exp{ width: 240px; } #js_open{ border-left: #ff0000; width: 70px; text-align: center; vertical-align: middle; } #js_seta{ margin-top: 325px; width: 70px; 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> <nav class="js_menu"> <section id="js_exp"> <a href="#">SMPC</a> <a href="#">NGC Informática(2015)</a> <a href="#">NGC Informática (2015-2016)</a> </section> <section id="js_open"> <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"/> </section> </nav> </div> 

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

這有效

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM