JQuery:打开/关闭菜单,打开但不关闭

时间:2016-04-13 16:42:00

标签: javascript jquery html css menu

我试图做一个隐藏在左侧的菜单,当我们点击它打开或关闭的按钮时。我有以下代码,但菜单刚打开,关闭的代码不工作,有人知道我做错了什么?



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>
		
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

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

这有效