html页面内容的收缩和展开效果


常见的网页中，会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果，新闻的内容只显示少数的一部分，然后后面会跟一个展开的链接，点击这个链接才会显示全部的新闻内容。


 


1、收缩情况下显示内容效果




jquery收缩展开文字 html收缩展开_网页的收缩展开效果


2、点开之后显示的内容效果



jquery收缩展开文字 html收缩展开_网页的收缩展开效果_02


3、实现的代码如下： 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h3 {
            text-align: center;
        }
        
        #content {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <h3>从零开发一个淘宝客公众号【嗨皮搜券】</h3>
    <span id="content">
        春节在家期间研究了一下淘宝客开放平台，并写了一个公众号【嗨皮搜券】，
        功能是可以查询淘宝和天猫内部优惠券，并生成淘口令，别人用我的淘口令
        下单就可以赚取佣金啦。其实50%的淘宝商家会设置一些内部优惠券，90%的商
        家会设置一些返利给推广人员帮忙推销商品，阿里妈妈美其名曰-粉丝福利购。
        利用这个套路做的比较成功的有返利网、花生日记等。看一下效果，发送宝贝
        标题即可搜索内部推广优惠券信息。 点击查看具体的搜券教程：
         https://mp.weixin.qq.com/s/yheG6E04GHE0Hjopt4KzOg。关注【嗨皮搜券】回复<客服>添加我微信，一起学习成长吧！
        用到哪些技术栈和服务？
1、Node.js(基于Koa搭建后台程序)
2、花生壳（内网穿透，本地开发调试）
3、nginx（由于花生壳的域名被微信屏蔽，使用nginx反代理，配合花生壳本地调试使用）
4、阿里云服务器（上线时使用，如果用自己的电脑的话可以不用买服务器）
5、TOP（淘宝开放平台API）
6、微信公众平台（开发文档）
7、Logo和图片在线设计（凡科快图）
   </span>
    <a href="javascript:;" id="btn">
        <<<收缩</a>
            <script type="text/javascript">
                //获取button按钮
                var btn = document.getElementById('btn');
                //获取p
                var content = document.getElementById('content');
                //获取p中的内容
                var str = content.innerHTML;
                //定义一个变量，表示当前的状态（收缩、展开）
                var onOff = true; // true表示展开
                btn.onclick = function() {
                    if (onOff) {
                        content.innerHTML = str.substr(0, 50) + "......";
                        btn.innerHTML = '>>>展开'
                    } else {
                        //说明当前状态是收缩的，需要展开
                        content.innerHTML = str
                        btn.innerHTML = '<<<收缩';
                    }
                    onOff = !onOff; //每点击一次，改变一次展开、收缩状态
                    return false; //阻止a标签的默认事件
                }
            </script>
</body>

</html>