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. prim algorithm

    function re=biaoji(j,biao) %判断j点是否已被标记 l=length(biao); for i=1:l if j==biao(i) re=1; return; end end ...

  2. ML.net重新训练模型需要注意的事项。

    ml.net是微软机器学习的东西,如果你的需求是需要一个固定的模型来进行操作的话那就按着官网的教程来就可以,但是大部分的模型可能不满足现有的需求,那么我们需要对模型进行重新训练. 重新训练模型有限制条 ...

  3. Cannot assign requested address 和 SO_REUSEADDR 参数

    1. 错误 今天项目中出现了大量的java.net.ConnectException: Cannot assign requested address (connect failed) 错误. 刚开始 ...

  4. 处理xls文件

    package com.cn.peitest.excel; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...

  5. [leetcode]75.Sort Color三指针

    import java.util.Arrays; /** * Given an array with n objects colored red,white or blue, * sort them ...

  6. JAVA_JNI字段描述符“([Ljava/lang/String;)V”(Android)

    JNI字段描述符"([Ljava/lang/String;)V "([Ljava/lang/String;)V" 它是一种对函数返回值和参数的编码.这种编码叫做JNI字段 ...

  7. MVC和WebApi路由机制比较

    1.MVC使用的路由 在MVC中,默认路由机制是通过解析url路径来匹配Action.比如:/User/GetList,这个url就表示匹配User控制器下的GetList方法,这是MVC路由的默认解 ...

  8. File类的特点?如何创建File类对象?Java中如何操作文件内容,什么是Io流Io流如何读取和写入文件?字节缓冲流使用原则?

    重难点提示 学习目标 1.能够了解File类的特点(存在的意义,构造方法,常见方法) 2.能够了解什么是IO流以及分类(IO流的概述以及分类) 3.能够掌握字节输出流的使用(继承体系结构介绍以及常见的 ...

  9. 【NC基础操作】开发环境配置初体验

    当我们拿到开发工具UAP-STUDIO-6.5.0.2和Home文件的时候,意味着我们可以用这两样东西开始进行项目开发了(默认其他准备已就绪). 运行UAP-STUDIO-6.5.0.2 双击进入&q ...

  10. RocketMQ(十)：数据存储模型设计与实现

    消息中间件,说是一个通信组件也没有错,因为它的本职工作是做消息的传递.然而要做到高效的消息传递,很重要的一点是数据结构,数据结构设计的好坏,一定程度上决定了该消息组件的性能以及能力上限. 1. 消息中 ...