[HTML+CSS+Vue.js] 超长文本等内容默认折叠显示，点击展开全文，再点击收起（仿知乎效果）

今天在做一个仿博客主页，日记的部分想做成折叠展开的效果，这样比较有利于浏览和交互，然后想起知乎问答的页面效果，就很符合我想要的样式：

因为之前没做过，不知从何下手，在网上查了大半天，一直想找最方便最简洁的代码……可惜大部分都很复杂，看着费劲，但确实给了我很多启发，于是我灵光一闪，开始自己头脑风暴：

需求： 浏览时默认只显示前三行文本，剩余部分折叠，点击“展开阅读全文”显示完整文本，再点击文末的“收起”恢复折叠状态
美化： “展开阅读全文”折叠杆挡住面板下端，并呈现半透明渐变效果
技术： HTML + CSS + Vue.js

HTML代码：

<div id="example"><!-- 利用v-if…v-else切换 展开 和 收起 两个画面，template包裹多个元素 --><template v-if="isHide"><!-- 只显示摘要的画面 --><div class="hideBg"><p class="summary">{{ content }}</p><div class="showBtn"><!-- 绑定点击事件onShow，点击展开全文 --><a href="#" @click.stop.prevent="onShow">展开阅读全文&nbsp;<!-- 向下的角箭头符号，用css画 --><span class="downArrow"></span></a></div></div></template><template v-else><!-- 显示完整内容的画面 --><div class="showBg"><p>{{ content }}</p><div class="hideBtn"><!-- 绑定点击事件onHide，点击收起内容 --><a href="#" @click.stop.prevent="onHide">收起&nbsp;<!-- 向上的角箭头符号 --><span class="upArrow"></span></a></div></div></template>
</div>

CSS代码：

/* 摘要背景板 */
.hideBg {width: 500px;background-color: #e9ecef;margin: 1.5rem;padding: 1.5rem;padding-bottom: 0;    /* 方便渐变层遮挡 */position: relative;    /* 用于子元素定位 */
}
/* 全文背景板，基本与摘要相同 */
.showBg {width: 500px;background-color: #e9ecef;margin: 1.5rem;padding: 1.5rem;
}
/* 摘要内容 */
.summary {overflow: hidden;    /* 隐藏溢出内容 */text-overflow: clip;    /* 修剪文本 */display: -webkit-box;    /* 弹性布局 */-webkit-box-orient: vertical;    /* 从上向下垂直排列子元素 */-webkit-line-clamp: 3;    /* 限制文本仅显示前三行 */
}
#example p {text-indent: 2em;
}
/* 展开按钮 */
.showBtn {width: 100%;    /* 与背景宽度一致 */height: 3rem;position: absolute;    /* 相对父元素定位 */top: 3rem;    /* 刚好遮挡在最后两行 */left: 0;z-index: 0;    /* 正序堆叠，覆盖在p元素上方 */text-align: center;background: linear-gradient(rgba(233,236,239,.5), white);    /* 背景色半透明到白色的渐变层 */padding-top: 3rem;
}
/* 收起按钮 */
.hideBtn {text-align: right;
}
#example a {text-decoration: none;    /* 清除链接默认的下划线 */
}
/* 向下角箭头 */
.downArrow {display: inline-block;width: 8px;    /* 尺寸不超过字号的一半为宜 */height: 8px;border-right: 1px solid;    /* 画两条相邻边框 */border-bottom: 1px solid;transform: rotate(45deg);    /* 顺时针旋转45° */margin-bottom: 3px;
}
/* 向上角箭头，原理与下箭头相同 */
.upArrow {display: inline-block;width: 8px;height: 8px;border-left: 1px solid;border-top: 1px solid;transform: rotate(45deg);margin-top: 3px;
}

JS代码：

var vm = new Vue({el: '#example',data: {content: "中华人民共和国位于亚洲东部，太平洋西岸 [1]  ，是工人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家 [2]  。1949年（己丑年）10月1日成立 [3-4]  ，以五星红旗为国旗 [5]  ，《义勇军进行曲》为国歌 [6]  ，国徽内容包括国旗、天安门、齿轮和麦稻穗 [7]  ，首都北京 [8]  ，省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区 [9]  ，是一个以汉族为主体民族，由56个民族构成的统一多民族国家，汉族占总人口的91.51% [10]  。新中国成立后，随即开展经济恢复与建设 [11]  ，1953年开始三大改造 [12]  ，到1956年确立了社会主义制度，进入社会主义探索阶段 [13]  。文化大革命之后开始改革开放，逐步确立了中国特色社会主义制度。 [14] 中华人民共和国陆地面积约960万平方公里，大陆海岸线1.8万多千米，岛屿岸线1.4万多千米，内海和边海的水域面积约470多万平方千米。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米。 [1]  陆地同14国接壤，与6国海上相邻。",isHide: true    //初始值为true，显示为折叠画面},methods: {onShow: function(){this.isHide = false;    //点击onShow切换为false，显示为展开画面},onHide: function(){this.isHide = true;    //点击onHide切换为true，显示为折叠画面}}
})

效果示例：

[HTML+CSS+Vue.js] 超长文本等内容默认折叠显示，点击展开全文，再点击收起（仿知乎效果）相关推荐

Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码这是前端开发博客的正文点击展开全文将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
echarts默认不显示部分折线，鼠标移动点击显示
需求:总共5条线,默认只显示3条,2条点击才显示效果图只显示3条,点击这个legend 显示这2条代码 Option = {tooltip: {trigger: 'axis',selectedM ...
Animate.css+wow.js实现页面滚动到可视区显示动画效果
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html 实现的滚动到可视区域后显示动画,自己之前没做过这种,非常感兴趣,然后问小伙伴, 大部分都没 ...
css实现文本框中内容超出长度显示省略号，鼠标移入悬浮显示全部内容
css样式: width: 300px;text-overflow: ellipsis;overflow: hidden; 此时的设置可以完美实现文本框中的内容超长显示为省略号:但是想知道全部内容是不 ...
html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
vue js中解决二进制转图片显示问题
一:问题工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示: ...
html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: <button id="box" onclick="pop_box()">弹出框< ...
CSS设置超出表格的内容用省略号显示
table{table-layout: fixed;} td{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} 转载于:ht ...
图库相册图片删除所有的分享按钮，点击打印，再点击所有打印机。再点击添加打印机，再点击默认打印服务，删除WLAN直连界面。
删除分享,下面来能出布尔值修改只是把更多菜单里的分享图标以及具体的单个相片预览界面的分享图标删掉,如果选中相片,上面还是会出现分享 vendor/mediatek/proprietary/packag ...

[HTML+CSS+Vue.js] 超长文本等内容默认折叠显示，点击展开全文，再点击收起（仿知乎效果）

HTML代码：

CSS代码：

JS代码：

效果示例：

[HTML+CSS+Vue.js] 超长文本等内容默认折叠显示，点击展开全文，再点击收起（仿知乎效果）相关推荐

最新文章

热门文章