今天做页面的时候需要做一个更多、收起的效果，我也是个新手啊，不会啊，慌的一批啊，怎么办？？这时候我想到一句话，男人不能说自己不行，我就说给我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文件中看下效果。

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

版权声明：本文为qsniubi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qsniubi/p/13050709.html