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. 构建Zookeeper集群（zkcluster） ~一篇文章玩转zk集群^.^

    概念 Zookeeper集群是由一个leader(负责人)主机和多个follower(追随者)或observer(观察者)主机组成. 构建一个Zookeeper集群需要有一个leader和一个foll ...

  2. 2021年第一个flag

    2021年开始更新本文列出的系列文章,根据书籍和自己的理解整理出spring框架的相关的学习 Spring 的设计理念和整体架构 学习目标 Spring的各个子项目 Spring的设计目标 Sprin ...

  3. 让API并行调用变得如丝般顺滑的绝招

    当数据量较大的时候,都会通过分库分表来拆分,分担读写的压力.分库分表后比较麻烦的就是查询的问题,如果不是直接根据分片键去查询的话,需要对多个表进行查询. 在一些复杂的业务场景下,比如订单搜索,除了订单 ...

  4. JPA 复杂查询 - Querydsl

     添加依赖 <!--query dsl --> <dependency> <groupId>com.querydsl</groupId> <art ...

  5. Java学习日报7.24

    package tem; public class Tem { public static void main(String[] args) { // TODO 自动生成的方法存根 //每隔10摄氏度 ...

  6. Android开发用到的几种常用设计模式浅谈（一）：组合模式

    1:应用场景 Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类.组合模式 ...

  7. JedisCluster使用pipeline操作Redis Cluster最详细从0到1实现过程

    公众号文章链接:https://mp.weixin.qq.com/s/6fMsG009RukLW954UUndbw 前言 2020年4月30日,Redis 6.0.0正式发布,标志着redis从此告别 ...

  8. Debian10_Centos8_fail2ban

    Debian10_Centos8_fail2ban 转载注明来源: 本文链接 来自osnosn的博客,写于 2020-11-7. Debian-10 的 fail2ban 支持 ipv6.防火墙内核是 ...

  9. 哎，这让人抠脑壳的 LFU。

    这是why哥的第 83 篇原创文章 让人抠脑壳的 LFU 前几天在某APP看到了这样的一个讨论: 看到一个有点意思的评论: LFU 是真的难,脑壳都给我抠疼了. 如果说 LRU 是 Easy 模式的话 ...

  10. P3714 [BJOI2017]树的难题 点分治+线段树合并

    题目描述 题目传送门 分析 路径问题考虑点分治 对于一个分治中心,我们可以很容易地得到从它开始的一条路径的价值和长度 问题就是如何将不同的路径合并 很显然,对于同一个子树中的所有路径,它们起始的颜色是 ...