jq 侧边栏点击收缩效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
	*{ margin:0 ; padding :0;}
	.box{ 500px; height:300px; background:red; position:relative; left: -200px;}
	.box1{200px; height:300px; background:green; float:left;}
	.box2{ 300px; height:300px; background:blue; float:left;}
	</style>

	
	<script src="jquery-2.2.2.min.js"></script>
	<script>
	$(function(){
			$(".box").click(function(){
				console.log($(".box").css("left"))
				if( $(".box").position().left == -200 ){//position().left获取的是不带px的
					$(".box").animate({"left":"0"})
				}else{
					$(".box").animate({"left":"-200"})
				}
				
			})

			// $(".box").click(function(){
			// 	console.log($(".box").css("left"))
			// 	if( $(".box").css("left") == "-200px" ){//css("left")只有一个参数的时候 是取值 但是这个带有px
			// 		$(".box").animate({"left":"0"})
			// 	}else{
			// 		$(".box").animate({"left":"-200"})
			// 	}
				
			// })
	})



	</script>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>
</html>
jq 侧边栏点击 收缩效果

jq 侧边栏点击收缩效果
