⽂章内容页点击“展开阅读全⽂”的实现代码
在做的时候，由于内容采集⾃其它⽹站，为了增加页⾯原创度，⼀⽅⾯是填充更多新内容，⽐如相关⽂章、最新⽂章；另⼀⽅⾯是减少重复内容，⽐如只展⽰部分内容，需要点击才能看到全⽂。
⽹上有现成的jQuery插件可以实现需要的效果，但源码中还是⼀次性加载出来了，对于搜索引擎爬⾍依旧是全⽂可见。所以，我的实现思路是访问页⾯时加载部分内容，点击“展开阅读全⽂”再加载剩余部分内容。
完整代码如下
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代码
<div class="article_content">{{lispre|safe}}</div>
jquery修改html内容<div class="hide-article-box hide-article-pos text-center">
  <a class="btn-readmore">
    展开阅读全⽂
    <i class="layui-icon layui-icon-down" ></i>  </a>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。