jquery展开更多

时间:2020-09-19 15:49:26 类型:JS/JQUERY
字号:    

页面先展示一部分, 然后点击展开更多, 再显示更多的信息,这是我们经常看到效果

实例效果如下:

QQ录屏20200919154248~1.gif

代码如下:

<style type="text/css">
 *{padding: 0; margin:0;}
.aboutUsDetail{
     width: 300px; margin: 0 auto;
     line-height: 22px !important;
     overflow: hidden;
     height: 88px;
}
.more{
	display: block; font-size: 18px;
	width: 160px; height: 36px; line-height:36px;
	text-align: center;
	color: #0171bf;
	border:1px solid #0171bf; border-radius: 30px;
	margin: 30px auto;
}
</style>
<div class="article aboutUsDetail">
	<div>
		南昌雅腾信息科技有限公司(YT)是一家专注高薪IT职业技能培训的机构,
		主要培养:php软件开发工程师、web前端开发工程师、JAVA开发工程师、UI设计师等;
		雅腾教育采用“小班现场授课”、技术总监“手把手辅导学员”、“理论知识与企业真实项目实战”结合的培养方式,
		更加注重学员的实战能力培养,加强学员项目实战经验的积累,始终坚持以提升学员的自身价值,
		加强学员的高薪就业能力为核心,实行品质高效的IT技术培训,实现一地学习全国就业的高品质教育服务
	</div>
</div>
<a href="javascript:void(0);" class="more extend">展开更多</a>
$(function(){
$(".extend").on("click",function(){
if($(this).text() == "展开更多"){
	$(".aboutUsDetail").animate({height:$(".aboutUsDetail>div").height()+"px"},1000);
	$(this).text("收缩");
}
else{
        $(this).text("展开更多");
	$(".aboutUsDetail").animate({height:"88px"},1000);
    }
})
})