您现在的位置是：首页 > 学无止境 > web前端web前端

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

AndyGuo2020-10-17 09:10:16【web前端】7345人已围观

简介我们在手机端看CSDN或知乎上的文章时，都会有一个点击展开阅读全文的按钮。这个功能效果使用还是很广泛的，网上也有很多这样的jq插件可以实...

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

如下图：

image.png

完整代码：

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>


顶一下 （9） 赏 踩一下 （5）
小郭博客

相关文章

最新发表

标签云 更多

点击排行

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏