html展开收起样式,前端网页内容实现展开/收起全文的操作（js+css控制高度实现）...

在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容.使用jquery比较容易实现,控制div的高度展现。

思路是 , 获取当前html文本的div高度 ,超过一定高度就增加一个class值 . 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文

下面直接展示代码：

1、html的div文本内容比如是这样

内容......

2、一段js代码实现控制展示的内容收起和展开效果，用jQuery实现

//展开，收起全文

var conh = $('.game_content').height();

var gmh = 300;

if (conh > gmh) {

$('.game_content').css('height', gmh + 'px');

$('.game_content').after('

展开全文 +

');

$('.intro_btn').click(function () {

if ($(this).hasClass('todown')) {

$('.game_content').css('height', 'auto');

$(this).removeClass('todown');

$(this).html('收起全文 -');

} else {

$('.game_content').css('height', gmh + 'px');

$(this).addClass('todown');

$(this).html('展开全文 +');

}

});

}

以上可以看到，判断文本div区域的高度，超过一定高度，比如300像素，就把文章收起，放一个div可以展开，反之亦然。把这段代码放到页面加载完成后的js函数里面即可.

这个应该是一个很简单的实现，希望可以帮到你，解决实际开发中的需求。

来源：萬仟网

html展开收起样式,前端网页内容实现展开/收起全文的操作（js+css控制高度实现）...相关推荐

最全BAT前端开发面试80题：算法+html+js+css！含答案大赠送！
最全前端开发面试题目:包含算法+网络+css面试+js+h5面试题目,尾部有最全BAT前端面试经典77题和答案,想要的就快来领走吧~(领取方式见文末) 一.前端算法面试 1.基本排序的方式冒泡.快排 ...
CSS 展开收起样式
效果:展开.收起一. 效果一代码: <template><div class="container"><div class="head- ...
视频直播APP源码，通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果一. 实现思路需要设置一个变量控制展开 / 收起效果提前写好最高高度的class样式,超出这个高度多余内容会隐藏只有在列表数据长度 ...
html5的修改滚动条滑块样式,前端项目修改默认滚动条样式
前端项目修改默认滚动条样式写过挺多项目都需要改变滚动条的默认样式并不想单独下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法,直接上代码. &::-webkit-scr ...
web前端入门到实战：五个最新的CSS特性以及如何使用它们
虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CSS的新特性.虽然这些新特性无法立刻得到众多浏览器的支持,但总是随着时间的发展,这些特性 ...
大前端汇总，EMMET、HTML、XML、CSS、JS、dom4j、JDBC、DButil、 servlet、jsp、EL、JSTl、同步分页、filter、AJAX
第一章 EMMET语法 1. syntax 快捷键介绍 Child : > 相当于创建子标签 nav>ul>li <nav><ul><li>< ...
css 默认显示滚动条,css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
常见的前端考试面试题目【vue，react，css，six】
常见的vue,javascript,css前端面试题 1.Vue2和Vue3的区别至少说5点 2.Vue3中组件通信的流程[父传子,子传父] 3.Apply/call/bind的原理是什么? 4.说说 ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
css控制滚动条透明,CSS控制滚动条样式的解析
我们在之前的两篇文章中,我们给大家介绍了关于CSS设置div滚动条样式.以及CSS3自定义滚动条样式的实例, 都知道当内容超出容器时,容器会出现滚动条,那我们如何使用CSS控制滚动条样式的呢?今天就给 ...

html展开收起样式,前端网页内容实现展开/收起全文的操作（js+css控制高度实现）...

html展开收起样式,前端网页内容实现展开/收起全文的操作（js+css控制高度实现）...相关推荐

最新文章

热门文章