底部添加广告位，点击收起 展开

 

1、html css

<div class="pptyy mld">
	<span><i class="icon icon-fold"></i></span>
	<div style="background:#EE7800;height: 120px;">动画更改高度的div</div>
</div>
<style type="text/css">
	.pptyy{
		width: 100%;
		position: fixed;
		bottom: 0px;
		z-index: 9999;
	}
	.pptyy .icon{
		width: 24px;
		height: 24px;
		display: block;
		position: absolute;
		right: 14px;
		top: -24px;
	}
	.pptyy .icon-fold{
		background: url('/static/img/ykt/open.png');
		background-size: 100% 100%;
		
	}
	.pptyy .icon-open{
		background: url('/static/img/ykt/cut_out.png');
		background-size: 100% 100%;
	}
</style>

2、js

$(".pptyy .icon").click(function () {
		console.log((1))
		if($(".pptyy .icon").hasClass('icon-fold')){
			$(".pptyy>div").stop().delay(50).animate({height:60},500);
			$(".pptyy .icon").removeClass('icon-fold').addClass('icon-open');
		}else{
			$(".pptyy>div").stop().delay(50).animate({height:120},500);
			$(".pptyy .icon").removeClass('icon-open').addClass('icon-fold');
		}
		return false; // 阻止默认事件
	});