仿新浪手机版首页那个菜单栏,点击箭头展开,点击箭头首页,在不改变结构...
发布网友
发布时间:2天前
我来回答
共1个回答
热心网友
时间:1天前
很多种做法,我写个简单的给你,css和html自己去改
html:
<div class="demo">
<a class="open" href="#">展开</a>
<a class="close" href="#">关闭</a>
</div>
css:
.demo{width: 500px;height: 100px;margin: 100px auto;background: #0075d5;position: relative;}
.demo a{color: #fff;position: absolute;right: 10px;bottom: 10px;}
.demo .close{display: none;}
jQuery:
$(".open" ).click(function(){
$(this ).hide().siblings(".close" ).show();
$(".demo" ).animate({height:'300px'},200);
return false;
});
$(".close" ).click(function(){
$(this ).hide().siblings(".open" ).show();
$(".demo" ).animate({height:'100px'},200);
return false;
});