Question

我正在尝试制作一个简单的菜单，当你单击按钮一次打开，然后第二次关闭，我之前做过但现在我不记得怎么做了，我觉得这里是代码：

var main = function(){
	$('#menuopen').click(function(){
		$('.leftbox').show();
		$('.leftbox').animate({left: "0"});
		$('.topbox').animate({left: "15%", width: "85%"});
	},
	function(){
		$('.leftbox').animate({left: "-15%"});
		$('.leftbox').hide();
		$('.topbox').animate({left: "0", width: "100%"});
	}
	);
}

$(document).ready(main);

body {
	background-color: #CCCCCC;
}

h2{
	text-align: center;
	font-family: 'Lato', sans-serif;
}

.topbox{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 10%;
	background-color: #006699;
}

.leftbox{
	display: none;
	position: absolute;
	background-color: #FFFFFF;
	top: 0px;
	left: -15%;
	width: 15%;
	height: 100%;
	box-shadow: 10px 67px 5px #888888;
}

#commentbox{
	position: absolute;
	top: 87%;
	left: 30%;
	width: 50%;
	resize: none;
	border-radius: 5px;
	outline: none;
	box-shadow: 10px 10px 10px #888888;
}

#submitbox{
	position: absolute;
	background-color: #006699;
	left: 82%;
	top: 87%;
	height: 66px;
	width: 132px;
	border-radius: 5px;
	border: 0px;
	outline: none;
	box-shadow: 10px 10px 10px #888888;
	font-family: 'Lato', sans-serif;
	font-weight:;
}

#menuopen{
	position: absolute;
	top: 25%;
	left: 15px;
	height: 32px;
	width: 32px;
}

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">	
	</head>
<body>
	<div class="topbox">
		<h2> Name's Lobby </h2>
		<img id="menuopen" src="menu_icon.png"/>
	</div>
	<div class="leftbox">
	</div>
	<div class="inputbox">
		<textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea>
		<input id="submitbox" type="submit" value="Submit">
	</div>
	</body>
</html>

这段代码出了什么问题，是不是jQuery正确？：o

Answer 1

您的代码大多是正确的但是创建了一个变量，例如var open = false;，然后在用户点击按钮时执行检查，执行类似if(open == false){ execute opening })然后else { execute closing }的操作，因为jquery没有知道它是否开放，所以你必须对它进行检查。

Answer 2

@George打败了我，但你可以添加一个opened状态变量，每次点击后都会切换：

＆＃13;

var main = function(){
   var opened = false;
	$('#menuopen').click(function(){
        if (opened) {
		  $('.leftbox').animate({left: "-15%"});
		  $('.leftbox').hide();
		  $('.topbox').animate({left: "0", width: "100%"});
        } else {
		  $('.leftbox').show();
		  $('.leftbox').animate({left: "0"});
		  $('.topbox').animate({left: "15%", width: "85%"});
       }
       opened = !opened;
	});
}

$(document).ready(main);

＆＃13;

body {
	background-color: #CCCCCC;
}

h2{
	text-align: center;
	font-family: 'Lato', sans-serif;
}

.topbox{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 10%;
	background-color: #006699;
}

.leftbox{
	display: none;
	position: absolute;
	background-color: #FFFFFF;
	top: 0px;
	left: -15%;
	width: 15%;
	height: 100%;
	box-shadow: 10px 67px 5px #888888;
}

#commentbox{
	position: absolute;
	top: 87%;
	left: 30%;
	width: 50%;
	resize: none;
	border-radius: 5px;
	outline: none;
	box-shadow: 10px 10px 10px #888888;
}

#submitbox{
	position: absolute;
	background-color: #006699;
	left: 82%;
	top: 87%;
	height: 66px;
	width: 132px;
	border-radius: 5px;
	border: 0px;
	outline: none;
	box-shadow: 10px 10px 10px #888888;
	font-family: 'Lato', sans-serif;
	font-weight:;
}

#menuopen{
	position: absolute;
	top: 25%;
	left: 15px;
	height: 32px;
	width: 32px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">	
	</head>
<body>
	<div class="topbox">
		<h2> Name's Lobby </h2>
		<img id="menuopen" src="menu_icon.png"/>
	</div>
	<div class="leftbox">
	</div>
	<div class="inputbox">
		<textarea placeholder="Enter your comment!" id="commentbox" rows="4" cols="50"></textarea>
		<input id="submitbox" type="submit" value="Submit">
	</div>
	</body>
</html>

＆＃13;

打开和关闭菜单jQuery

2 个答案: