$(".btn1").click(function(){
$("#box").animate({height:"300px"})
})
也可以设置溢出隐藏：
<div style="min-height:10pxoverflow:hidden"><div style="margin-top:-800px">content more..</div>
</div>
第二种方式也需要js动态改变div style里面的margin-top。
css页面折叠可以通过display:block/none 来控制内容显示和隐藏。 同时用js来触发。你的采纳是我前进的动力!
记得好评和采纳，答题不易，互相帮助，
手机提问的朋友在客户端右上角评价点满意即可.
如果你认可我的回答，请及时点击采纳为满意回答按钮！
分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：
一：页面结构：
二：页面样式css，放在head标签里
三：引入jquery文件
四：给一级菜单绑定点击事件，点击时展开下面的子菜单
五：给二级菜单绑定事件，点击时加入选中的深色背景
六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡
原文作者技术博客： https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流
