html如何制作展开全文,如何实现文章内容页点击“展开阅读全文”的功能

我们在手机端看CSDN或知乎上的文章时，都会有一个点击展开阅读全文的按钮。这个功能效果使用还是很广泛的，网上也有很多这样的jq插件可以实现，今天小郭给大家分享一下自己在项目中常用到的js点击展开阅读全文的代码。

如下图：

完整代码：function pd(ele,bili){//ele是展开阅读全文的点击按钮，bili是高度比例，一般为1

var n = $("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(){

var i = $(".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}}

展开阅读全文

版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《小郭博客》。

本文网址：http://www.d163.net/html/web2/186.html