文章內容頁點擊“展開閱讀全文”的實現代碼

在做事業單位招聘信息網的時候，由於內容采集自其它網站，為了增加頁面原創度，一方面是填充更多新內容，比如相關文章、最新文章；另一方面是減少重復內容，比如只展示部分內容，需要點擊才能看到全文。

網上有現成的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>
<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>