我们在手机端看CSDN或知乎上的文章时，都会有一个点击展开阅读全文的按钮。这个功能效果使用还是很广泛的，网上也有很多这样的jq插件可以实现，今天小郭给大家分享一下自己在项目中常用到的js点击展开阅读全文的代码。
如下图：
完整代码：functionpd(ele,bili){//ele是展开阅读全文的点击按钮，bili是高度比例，一般为1
varn=$("div.article_content"),
e=n.children(),
l=e.length,//获取内容区域子元素的数量
h=0,c=0;//h是显示区域的高度，c是计数器，显示多少个元素
if(l>20){
e.each(function(){
c+=1;
if(c<=20){h+=$(this).height()}
})
n.css({//设置显示区域的高度
height:h*bili+"px",
overflow:"hidden"
})
}else{ele.parent().remove()}//少于20个元素就不用隐藏
}
(function(){
vari=$(".btn-readmore"),//展开阅读全文的点击按钮
n=$("div.article_content");
i.click(function(){
$(this).parent().remove();//取消隐藏
n.css({height:'auto',});//高度自适应
n.after('{{lisnext|safe}}')//插入剩余内容，{{lisnext|safe}}是flask的调用内容，其他框架的自行修改。
})
pd(i,1)
})()
HTML代码：
{{lispre|safe}}
展开阅读全文
版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《小郭博客》。
本文网址：/html/web2/186.html
