jQuery 文本段落展开和折叠效果

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展开和折叠效果</title>
<style>
html,body,div,h2,p{margin: 0;padding: 0;}
html{font: 1em Arial, Helvetica, sans-serif;color: #444;}
a{color: #0087f1;}
p{margin-bottom: 5px;}
#container{margin: 0 auto;width: 600px;}
#container h2{font-size: 20px;color: #0087f1;}
#wwww{position: relative;padding: 10px;overflow: hidden;}
#wwww:after{
content: "";
display: block;
position: absolute;
width: 100%;
background-image: linear-gradient(hsla(0,0%,100%,0),#fff);
opacity: 0;
bottom: 0;
z-index: 1;
transition: opacity .4s ease-out;
}
#wwww.current:after{
height: 100px;
opacity: 1;
}
#read-more{padding: 5px;background: #fff;color: #333;}
#read-more div: hover{color: #000;}
.sdf{display: flex; justify-content: center; align-items: center;cursor: pointer;} </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var slideHeight = 200; //控制默认显示部分的高度
var defHeight = $('#wwww').height();
if(defHeight >= slideHeight){
$('#wwww').css('height' , slideHeight + 'px');
$('#read-more div').click(function(){
var curHeight = $('#wwww').height();
if(curHeight == slideHeight){
$('#wwww').animate({height: defHeight}, "normal").removeClass("current");
$(this).children("span").text('收起');
$(this).children("img").css("transform","rotate(180deg)")
}else{
$('#wwww').animate({height: slideHeight}, "normal").addClass("current");
$(this).children("span").text('展开');
$(this).children("img").css("transform","rotate(0)");
}
return false;
});
}
});
</script>
</head>
<body>
<div id="container">
<h1>jQuery段落文字展开收起</h1>
<div id="wwww" class="current">
<div>
<p>特色"摩托杂技团"缺席 通过电视台转播的现场视频可以看到,仪式上各种新式武器纷纷亮相,印度士兵分为多个方队接连入场。 不同于以往的阅兵仪式,印度特色——"摩托杂技队"并没有出现,原因是摩托杂技需要相互配合,无法保持社交距离。虽然印方称是为了防止疫情蔓延,但整场阅兵式结束,除了一组"黑脸蒙面男"之外,其他的方阵不仅没有保持社交距离,脸上也是没有任何口罩等遮挡物。参与阅兵的规模及人数也似乎并没有受到新冠疫情的影响。</p>
<p>特色"摩托杂技团"缺席 通过电视台转播的现场视频可以看到,仪式上各种新式武器纷纷亮相,印度士兵分为多个方队接连入场。 不同于以往的阅兵仪式,印度特色——"摩托杂技队"并没有出现,原因是摩托杂技需要相互配合,无法保持社交距离。虽然印方称是为了防止疫情蔓延,但整场阅兵式结束,除了一组"黑脸蒙面男"之外,其他的方阵不仅没有保持社交距离,脸上也是没有任何口罩等遮挡物。参与阅兵的规模及人数也似乎并没有受到新冠疫情的影响。</p>
<p>特色"摩托杂技团"缺席 通过电视台转播的现场视频可以看到,仪式上各种新式武器纷纷亮相,印度士兵分为多个方队接连入场。 不同于以往的阅兵仪式,印度特色——"摩托杂技队"并没有出现,原因是摩托杂技需要相互配合,无法保持社交距离。虽然印方称是为了防止疫情蔓延,但整场阅兵式结束,除了一组"黑脸蒙面男"之外,其他的方阵不仅没有保持社交距离,脸上也是没有任何口罩等遮挡物。参与阅兵的规模及人数也似乎并没有受到新冠疫情的影响。</p>
</div>
</div>
<div id="read-more">
<div class="sdf">
<span>展开</span>
<img src="img/bottom.png"/>
</div>
</div>
</div>
</body>
</html>

效果预览:

   

jQuery 文本段落展开和折叠效果的更多相关文章

  1. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  2. js_css_dl.dt实现列表展开、折叠效果

    第一种方式:不提倡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. JQuery EasyUI treegrid展开与折叠,以及数据加载两次的问题

    问题:做项目的时候遇到代码生成的页面,只默认展开了一级节点,每次操作之后刷新还要手动一级一级展开,太麻烦了 官方API:http://www.jeasyui.net/plugins/186.html ...

  4. 关于类似QQ的展开和折叠效果的实现

    介绍: 1.两级折叠与展开: 实现原理如下: 1>通过表视图的组的头视图和单元格实现; 2>通过改变cell的高度实现; 3>通过cell实现; 实现 UITableView 的ce ...

  5. Vue 实现展开折叠效果

    Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...

  6. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  7. jquery ztree 刷新后记录折叠、展开状态

    ztree :http://www.ztree.me/v3/main.php 项目中用到了这个插件,刚好也有需求 在页面刷新后,保存开始的展开.折叠状态, 其实 dtree: http://www.d ...

  8. 展开折叠效果 height未知 transition无效

    展开折叠效果,没有设置height时 transition 不起作用 可以设置max-height .default { max-height: 500px; transition: all 1000 ...

  9. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

随机推荐

  1. Autofac官方文档翻译--一、注册组件--2传递注册参数

    官方文档:http://docs.autofac.org/en/latest/register/parameters.html 二.Autofac 传递注册参数 当你注册组件时能够提供一组参数,可以在 ...

  2. 毕业三年,如何达到月薪30K?我想跟你聊聊!!

    写在前面 很多读者私信问我,自己工作三多年了,随着工作年限的不断增长,感觉自己的技术水平与自己的工作年限严重不符.想跳槽出去换个新环境吧,又感觉自己的能力达不到心仪公司的标准,即使投了简历也没人来通知 ...

  3. Java 8 新特性 - Lambda表达式

    Lambda表达式 vs 匿名类既然lambda表达式即将正式取代Java代码中的匿名内部类,那么有必要对二者做一个比较分析.一个关键的不同点就是关键字 this.匿名类的 this 关键字指向匿名类 ...

  4. java中io流实现文件上传下载

    新建io.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  5. web项目报错 无法解析,丢失包 是缺少本地运行jre

    1.通过build path 添加add Library 2.添加jre

  6. 整数划分(硬币问题)(dp)

    题目描述 考试时思路 本菜狗考试的时候,第一扁打了纯dfs,15分拿了9分 后面看了时限400ms,多组数据,以为会卡常数,然后就想着先dp打表然后再直接O(1)查询 后面发现自己想多了,数据有点水- ...

  7. 俯瞰Dubbo全局,阅读源码前必须掌握这些!!

    写在前面 在上一篇<冰河开始对Dubbo下手了!>一文中,我们重点介绍了为何要学习Dubbo,而且还是要深入理解Dubbo的原理和核心源码.既然是要写深度解析Dubbo源码的系列专题,我们 ...

  8. Java 使用线程池执行若干任务

    在执行一系列带有IO操作(例如下载文件),且互不相关的异步任务时,采用多线程可以很极大的提高运行效率.线程池包含了一系列的线程,并且可以管理这些线程.例如:创建线程,销毁线程等.本文将介绍如何使用Ja ...

  9. cookie和session会话技术

    因为http协议是无状态的,也就是说每个客户端访问服务器端资源时,服务器并不知道该客户端是谁,所以需要会话技术识别客户端状态.会话技术是帮助服务器记住客户端状态的. 一次会话的开始是通过浏览器访问某个 ...

  10. Linux面试必备

    1.Linux的体系结构