JS 实现段落展开和收起的显示

程序媛_MISS_zhang_0110

已于 2024-01-04 17:43:43 修改

阅读量544

点赞数 1

分类专栏： js基础文章标签： javascript 前端 html

于 2022-10-20 14:15:24 首次发布

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/127426180

版权

js基础专栏收录该内容

58 篇文章 2 订阅

订阅专栏

JS 实现段落展开和收起

一、利用高度来实现
- 效果图
二、利用显示字符个数实现
- 效果图

一、利用高度来实现

效果图

在这里插入图片描述

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

            .box {
                width: 280px;
                margin: auto;
                line-height: 24px;
                height: 72px;
                font-size: 14px;
                /* box-sizing: content-box; */
                /* border: 1px solid #000; */
            }
        </style>
    </head>

    <body>
        <div class="box">
            <div
                introduction="本栏目精选的散文不仅是被公认的上乘之作，更分门别类。每一篇散文更是加入了编者的心路花语，与读者分享。我们诚挚地期望，通过阅读本栏目，能够引领读者登堂入室，管中窥豹，领略中外散文的真貌，同时启迪心智，陶冶性情，进而提高个人的审美意识、文学素养、写作水平、鉴赏能力、人生品位，为自己的人生添上光彩亮丽的一笔。"
            >
                本栏目精选的散文不仅是被公认的上乘之作，更分门别类。每一篇散文更是加入了编者的心路花语，与读者分享。我们诚挚地期望，通过阅读本栏目，能够引领读者登堂入室，管中窥豹，领略中外散文的真貌，同时启迪心智，陶冶性情，进而提高个人的审美意识、文学素养、写作水平、鉴赏能力、人生品位，为自己的人生添上光彩亮丽的一笔。
            </div>
        </div>
        <span>本</span>
        <script>
            let text =
                '本栏目精选的散文不仅是被公认的上乘之作，更分门别类。每一篇散文更是加入了编者的心路花语，与读者分享。我们诚挚地期望，通过阅读本栏目，能够引领读者登堂入室，管中窥豹，领略中外散文的真貌，同时启迪心智，陶冶性情，进而提高个人的审美意识、文学素养、写作水平、鉴赏能力、人生品位，为自己的人生添上光彩亮丽的一笔。'
            let elems = document.querySelector('.box')
            let contentText = '' //不展示全时候的文字
            // 机构简介展开收起
            let contentEl = document.querySelector('.box div')
            // 最多显示两行，超出显示...
            function twoLineDisplay(elems) {
                var title = elems.textContent.trim()
                var arrTitle = title.split('') //arrTitle是一个数组
                let heightEndArr = [] // 存放字体offsetTop的数组
                let contextNumber = 0 // 2行字体总数量
                elems.innerHTML = ''

                for (let i in arrTitle) {
                    let itemText = arrTitle[i]
                    let spanDom = document.createElement('span')
                    spanDom.innerHTML = itemText

                    if (heightEndArr.length < 3) {
                        //<3 表示不超过3行
                        elems.appendChild(spanDom)
                        contextNumber++
                        if (!heightEndArr.includes(spanDom.offsetTop)) {
                            heightEndArr.push(spanDom.offsetTop)
                        }
                    } else {
                        break
                    }
                }
                elems.innerHTML =
                    title.slice(0, contextNumber - 8) +
                    '...<span class="moreBtn" style="color:#D9A356;">展开全部</span>'
                contentText = elems.innerHTML
                document.querySelector('.moreBtn') &&
                    (document.querySelector('.moreBtn').style.float = 'right')
            }
            twoLineDisplay(contentEl)

            document.addEventListener('click', function (event) {
                const target = event.target
                if (target && target.className == 'moreBtn') {
                    contentEl.innerHTML =
                        contentEl.getAttribute('introduction') +
                        '<span class="closeBtn" style="float:right;color:#D9A356">收起全部</span>'
                    contentEl.setAttribute('class', 'content')
                }
                if (target && target.className == 'closeBtn') {
                    contentEl.innerHTML = contentText
                    document.querySelector('.moreBtn') &&
                        (document.querySelector('.moreBtn').style.float = 'right')
                    contentEl.setAttribute('class', 'content noMore')
                }
            })
        </script>
    </body>
</html>

二、利用显示字符个数实现

效果图

在这里插入图片描述

<head>
    <meta charset="UTF-8" />
    <title>段落展开和收起</title>
    <style>
        .box {
            margin: 0 auto;
            width: 400px;
            height: 300px;
            border: 1px solid cadetblue;
            background-color: #efefef;
            border-radius: 10px;
            font-size: 15px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="box">
        <p id="content">
            人生最美是清欢；愿有一屋，不被打扰，幸福终老 ；一袭江南梦，醉卧烟雨中；春在水墨中发芽
            恬淡，禅里开出的花 ；寻得一方庭院，做匠人 ；有一个院子，种花，画画 ；春未暖,花先开
            中国青花蓝，惊艳世界 ；寻一扇窗子，找到一份静心 ；拖地浇花，春暖花开
            ；寻一个小镇，守一人终老。
            <br />
            人生如一场修行，得意时，“一日看尽长安花”，艰难时，“潦倒新停浊酒杯”，但生命的跋涉不能回头，
            哪怕“畏途巉岩不可攀，也要“会当凌绝顶”，哪怕“无人会登临意”，也要“猛志固常在”，
            从经典中汲取“九万里风鹏正举”的力量，历练“也无风雨也无晴”的豁然，“待到重阳日”，我们“还来就菊花”。
        </p>
    </div>
    <script>
        window.onload = function show() {
            var len = 100 //默认显示字数
            var con = document.getElementById('content')
            var content = con.innerHTML //获取段落内容

            var span = document.createElement('span') //创建<span>元素
            var a = document.createElement('a') //创建<a>元素
            span.innerHTML = content.substring(0, len) //一开始span里的内容为content的前len个字符

            a.innerHTML = content.length > len ? '...展开' : '' //判断显示的字数是否大于默认显示的字数 来设置a的显示
            a.href = 'javascript:void(0)' //让a链接点击不跳转
            //点击时修改span标签还有a标签
            a.onclick = function () {
                if (a.innerHTML.indexOf('展开') > 0) {
                    //如果a中含有"展开"点击后则显示"收起"
                    a.innerHTML = '<< 收起'
                    span.innerHTML = content //span标签显示所有字数
                } else {
                    a.innerHTML = '... 展开'
                    span.innerHTML = content.substring(0, len)
                }
            }
            // 设置p内容为空，span元素 a元素加入到p中
            con.innerHTML = ''
            con.appendChild(span)
            con.appendChild(a)
        }
    </script>
</body>