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

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

展开阅读全文

版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《小郭博客》。

本文网址：http://www.d163.net/html/web2/186.html

html如何制作展开全文,如何实现文章内容页点击“展开阅读全文”的功能相关推荐

php 文章页面阅读全文,给WordPress文章内容页增加阅读全文展开功能
首页我们需要添加一个JS效果代码在header.php中,放在body标签前面,当然你也可以只添加在sinlge.php内 // 添加文章页展开收缩JS效果 jQuery(document).read ...
php 文章页面阅读全文,纯代码为WordPress文章内容页增加阅读全文展开功能
摘要:首页大挖想要分享这篇文章内容的原因是由于csdn,这个交流社区不得不说是一个技术开发人员,外链引流的圣地,权重高.易收录... 首页大挖想要分享这篇文章内容的原因是由于csdn,这个交流社区不得 ...
wordpress网站文章内容页模板主题开发制作教程
内容页模板主题是网站中的重中之重,是主要承载我们的网站内容的页面,也是为用户展示结果的界面,那么wordpress网站文章内容页模板主题开发制作教程主要将的就帮我们顺利的学会主题开发,主要的内容有,标 ...
dedecmsmip_织梦MIP文章内容页图片适配百度MIP规范
不用修改程序内核文件,不影响电脑站和手机站文章内容页的文章内容输出,增加个自定义方法来解决织梦MIP文章内容页图片适配百度MIP规范操作步骤 width|height 去除图片宽高 style 去除 ...
文章内容页调用缩略图
文章内容页调用缩略图方法如下两种.第一种没有大小设置.原图显示.第二种.可以设大小, {dede:field.image/} <img src="{dede:field.litpic ...
织梦.html和htm,织梦dedecms之article_article.htm(文章内容页模板)介绍
在dedecms后台的默认模板管理打开article_article.htm文章内容页模板,头部tkd标签调用如下: {dede:field.title/}_{dede:global.cfg_webn ...
织梦文章内容页调用时间，精确到秒
织梦文章内容页调用时间,精确到秒 {dede:field.pubdate function="MyDate('Y-m-d H:i:s',@me)"/}
手机站的view.php,织梦网站文章内容页动态地址plus/view.php路径修改
织梦系统的漏洞很多来自plus目录,一般的文章站根本用不了那么多功能,因此可以考虑直接把整个plus文件夹删除掉.在发布文章时要预览文章,因此我把plus下除了view.php 和 img文件夹(存放 ...
文章内容页调用所属栏目地址的标签
{dede:type typeid="~typeid~"} <a href="[field:typeurl/]">[field:typename/] ...

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

html如何制作展开全文,如何实现文章内容页点击“展开阅读全文”的功能相关推荐

最新文章

热门文章