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. （一）NumPy基础：数组和矢量计算

    一.创建ndarray 1.各种创建函数的使用 import numpy as np #创建ndarray #1.array方法 data1 = [[6, 7.5, 8, 0, 1], [2, 8, ...

  2. matplotlib学习日记（十一）---坐标轴高阶应用

    (一)设置坐标轴的位置和展示形式 (1)向画布中任意位置添加任意数量的坐标轴 ''' 通过在画布的任意位置和区域,讲解设置坐标轴的位置和坐标轴的展示形式的实现方法, 与subplot,subplots ...

  3. 深入理解MySQL系列之锁

    按锁思想分类 悲观锁 优点:适合在写多读少的并发环境中使用,虽然无法维持非常高的性能,但是在乐观锁无法提更好的性能前提下,可以做到数据的安全性 缺点:加锁会增加系统开销,虽然能保证数据的安全,但数据处 ...

  4. setTimeout 是到了xx ms 就执行吗，了解浏览器的 Event-Loop 机制

    要想 JavaScript 玩得溜,还得了解波 JavaScript 执行机制/(ㄒoㄒ)/~~. 个人博客:https://shansan.top 前言 最近看了波 JavaScript 相关的文章 ...

  5. 【整理】互联网服务端技术体系：高性能之并发（Java）

    分而合之,并行不悖. 综述入口见:"互联网应用服务端的常用技术思想与机制纲要" 引子 并发,就是在同一时间段内有多个任务同时进行着.这些任务或者互不影响互不干扰,或者共同协作来完成 ...

  6. JVM 完整深入解析

    工作之余,想总结一下JVM相关知识.以下内容都是针对于jdk1.7的. Java运行时数据区: Java虚拟机在执行Java程序的过程中会将其管理的内存划分为若干个不同的数据区域,这些区域有各自的用途 ...

  7. js对比两个时间的大小

    /** * 时间对比 开始=结束返回0;开始>结束返回-1;开始<结束返回1 */ function dateComparison(date1,date2){ var start =new ...

  8. hadoop大数据组件启动

    1.1.启动集群 sbin/start-dfs.sh注:这个启动脚本是通过ssh对多个节点的namenode.datanode.journalnode以及zkfc进程进行批量启动的. 1.2.启动Na ...

  9. 解决threadLocal父子变量传递问题

    一.问题的提出 在系统开发过程中常使用ThreadLocal进行传递日志的RequestId,由此来获取整条请求链路.然而当线程中开启了其他的线程,此时ThreadLocal里面的数据将会出现无法获取 ...

  10. git 工作区与版本库

    git 工作区.版本库 在我们使用git的时候,我们脑海中一定要有一个关于git的框架,如下图: 我们先对git的工作区.暂存区.本地仓库做一个基本的解释 工作区: 就是我们电脑中代码的下载目录 版本 ...