Asp,Php,Jssdk,mysql,mssql,微信公众号开发,小程序开发-学习笔记 收集日常学习笔记和重点,交流QQ:79657181,手机/微信:18611436777

js显示隐藏抽屉效果支持箭头,点击出点击关

<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
onoffindex=0;
$(document).ready(function(){
	$(".h").click(function(){
	var type=$(this).attr("_tabtype");//声明这个变量
		if(onoffindex==type){
			$(".h").find("i").html("1");
			$(".box").toggle();
			onoffindex=0;
			return false;
		}
	onoffindex=type;
		$(".h").find("i").html("3");
		$(".box").toggle();
});
  
//弹出区域点击关闭
$(".box").on("click",function(){
	$(".box").toggle();
	$(".h").find("i").html("1");//关闭后往上上面的i中写入符号2
});
  
});
</script>
<style type="text/css">
.box{ position:absolute; background-color:#CC6600; width:70%; height:500px; display:none;}
</style>
</head>
<body>

<li class="h" ancococo="">物流园区 <i class="zx56_icon">1</i></li>
<div class="box" >
这是一个段落。中华人民共和国中华人民共和国中华人民共和国
这是另一个段落。可以
</div>
</body>
</html>


2017年12月7日 | 发布:anco | 分类:JavaScript | 评论:0