js写多余文字用省略号表示，点击可显示隐藏

最新推荐文章于 2022-01-13 17:06:55 发布

第三世界viee

最新推荐文章于 2022-01-13 17:06:55 发布

阅读量4.5k

点赞数

分类专栏： js 文章标签：多余文字省略号显示隐藏

本文链接：https://blog.csdn.net/JJHuiQ/article/details/53290889

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

因为是多段文字的隐藏，用js写比较麻烦，索性用jquery写了

html部分

    <div>
        <p class="word-length">
            超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏
        </p>
        <span class="btn">[展开]</span>
    </div>
    <div>
        <p class="word-length">
            超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏超过20个字多余隐藏
        </p>
        <span class="btn">[展开]</span>
    </div>
    <div>
        <p class="word-length">
            没超过20个字
        </p>
        <span class="btn">[展开]</span>
    </div>

js部分

    <script type="text/javascript">
    window.onload = function(){
        var wordLength = function(a,b){//a是文字的class，b是按钮的class
            var ininWordArr = [];//用来存储所有段落的文字
            var nowWordArr = [];//用来存储隐藏后所有段落的文字
            $(a).each(function(){
                var initWordLength = $(this).html().length;//当前段落文字的长度
                var ininWord = $(this).html();
                ininWordArr.push(ininWord);
                var nowWord;
                if (initWordLength>20) {
                    nowWord = $(this).html().substr(0,20)+'......';
                } else {
                    nowWord = $(this).html();
                    $(this).next().css('display','none');
                }   
                $(this).html(nowWord);
                nowWordArr.push(nowWord);
            })
            $(document).on('click',b,function(){
                var i = $(b).index($(this));
                if ($(this).html() == '[展开]') {
                    $(this).html('[收起]');
                    $(this).prev().html(ininWordArr[i]);
                } else {
                    $(this).html('[展开]');
                    $(this).prev().html(nowWordArr[i]);
                }
                return false;
            })
        }('.word-length','.btn')
    }
    </script>