您现在的位置是:首页 > 前端开发

jQuery文章内容页点击“展开阅读全文”的实现代码

博主:紫藤心-迷途    日期:2020-07-16 浏览次数:374次

在做采集站的时候,由于内容采集自其它网站,为了增加页面原创度,一方面是填充更多新内容,比如相关文章、最新文章;另一方面是减少重复内容,比如只展示部分内容,需要点击才能看到全文。
网上有现成的jQuery插件可以实现需要的效果,但源码中还是一次性加载出来了,对于搜索引擎爬虫依旧是全文可见。所以,我的实现思路是访问页面时加载部分内容,点击“展开阅读全文”再加载剩余部分内容。

20200716103514.png

完整代码如下:
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 > 10){
        e.each(function(){
            c += 1;
            if (c<=10){h += $(this).height()}
        })
        n.css({//设置显示区域的高度
            height: h * bili + "px",
            overflow: "hidden"
        })
    }else{ele.parent().remove()}//少于10个元素就不用隐藏
}
(function(){
var i = $(".btn-readmore"), //展开阅读全文的点击按钮
n = $("div.article_content");
i.click(function(){
  $(this).parent().remove();//取消隐藏
  n.css({height:'auto',});//高度自适应
  n.after('{$jz["body"]}')//插入剩余内容,{$jz["body"]}是极致cms的调用内容,其他框架的自行修改。
})
pd(i, 1)
})()

HTML代码:

<div class="article_content">{{lispre|safe}}</div>
<div class="hide-article-box hide-article-pos text-center">
  <a class="btn-readmore">
    展开阅读全文
    <i class="layui-icon layui-icon-down" style="font-size: 18px; color: #ca0c16;vertical-align:middle;"></i>  
  </a>
</div>


分享到: / / / /
  • 点击此处扫一扫二维码,直接手机访问此页