JavaScript 文章展开与收缩

在这里插入图片描述
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            border: 10px solid #ccc;
            width: 500px;
            padding: 10px;
        }

        p {
            display: inline;
        }
    </style>
    <script>
        window.onload = function () {
            var oP = document.querySelector('p');
            var oA = document.querySelector('a');
            var str = oP.innerHTML; // 原始的内容

            oP.innerHTML = str.slice(0, 20) + '……';
            oA.innerHTML = '展开';

            oA.onclick = function () {
                if (this.innerHTML === '展开') {
                    // 展开
                    oP.innerHTML = str;
                    oA.innerHTML = '收缩';
                } else {
                    // 收缩
                    oP.innerHTML = str.slice(0, 20) + '……';
                    oA.innerHTML = '展开';
                }
            }

        }
    </script>
</head>

<body>
    <div>
        <p>这一入股交易基于双方2014年签署的战略协议。为保障股东利益,2014年双方协议承诺,蚂蚁金服每年需向阿里巴巴支付知识产权及技术服务费,金额相当于蚂蚁金服税前利润的37.5%;同时,在条件允许的情况下,阿里巴巴有权入股并持有蚂蚁金服33%的股份,并将相应的知识产权转让给蚂蚁金服,上述服务费的安排同步终止。
        </p>
        <a href="javascript:;">收缩</a>
    </div>

</body>

</html>
发布了8 篇原创文章 · 获赞 0 · 访问量 87

猜你喜欢

转载自blog.csdn.net/Augur1212/article/details/103987172