Discuz!论坛帖子内容页实现仿CSDN展开阅读全文效果

admin · 发表于 2020-7-13 23:29:30

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

完整代码如下
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>

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz!论坛帖子内容页实现仿CSDN展开阅读全文效果

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com