一段文字的更多、收起效果

2020-06-05 17:04:02 阅读：287 来源： 互联网

标签：文字 bb text 收起 gengduo 一段 data zishu

今天做页面的时候需要做一个更多、收起的效果，我也是个新手啊，不会啊，慌的一批啊，怎么办？？这时候我想到一句话，男人不能说自己不行，我就说给我10分钟。然后我去百度，希望可以找个插件用用，然后发现代码量太大，我这个人比较懒，能少写一行代码，绝不多写一行。然后我开始自己写，先看了一下他们写的逻辑，最后成功完成任务。分享上来，供大家使用，注释、逻辑什么的我都写好了，有什么不懂的地方大家可以直接评论。或者发现可以用更少的代码写出来的，也希望大家可以评论出来，不要抠抠搜搜的。废话不多说，上源码

<!DOCTYPE html>
<html lang="zh">
    <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></title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        a {
            text-decoration: none;
            color: #333;
        }

        .box {
            color: #FD6262;
        }
    </style>
    <body>
        <div class="box">
            <p>
                <span class="zishu">测试测试测试测试</span>
                <a href="javascript:;" class="gengduo" data-fld="1">更多>></a>
            </p>
        </div>
        <script type="text/javascript">
            $(function() {
                //获取span里的文字
                var bb = $('.zishu').text()
                // aa代表的是span里的文字的字数
                var aa = bb.length
                // 获取p标签里的文本
                var cc = $('.box p').text()
                // 控制台打印出span里的字数的个数
                console.log(aa)
                // 给字数做判断
                // 逻辑：1、如果字数大于5个,那么span里只显示5个字+省略号，更多显示；
                    //  2、否则显示的是原文文字个数，收起显示
                if (aa > 5) {
                    $('.zishu').text(cc.substring(0, 10) + "...")
                    $('.gengduo').show()
                } else {
                    $('.zishu').text(bb)
                    $('.gengduo').hide()
                }
                // 更多和收起的点击事件
                // 逻辑：1、因为不知道用户要点击几次更多和收起，所以直接给点击事件套个循环，随便他点几次
                //        2、给a标签一个data值，通过data值来判断显示更多还是收起
                //        3、给a标签一个点击事件
                for (var i = 0; i < bb.length; i++) {
                    $('.gengduo').eq(i).click(function() {
                        if ($(this).data('fld') == '1') {
                            $('.zishu').text(bb)
                            $('.gengduo').data('fld', '0').text('收起>>')
                        } else {
                            $('.zishu').text(cc.substring(0, 10) + "...")
                            $('.gengduo').data('fld', '1').text('更多>>')
                        }
                    })
                }

            })
        </script>
    </body>
</html>

大家可以直接复制、粘贴到html文件中看下效果。

注：本文系原创文章，转载请注明出处

标签：文字,bb,text,收起,gengduo,一段,data,zishu
来源： https://www.cnblogs.com/qsniubi/p/13050709.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一段文字的更多、收起效果