文章内容页点击“展开阅读全文”的实现代码
在做事业单位招聘信息网的时候,由于内容采集自其它网站,为了增加页面原创度,一方面是填充更多新内容,比如相关文章、最新文章;另一方面是减少重复内容,比如只展示部分内容,需要点击才能看到全文。
网上有现成的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>
如果您看完本篇感觉不错,请点击下方的【推荐】支持一下博主!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性