A-A+

jquery 操作list 控制超出文字隐藏显示 多行控制

2019年12月09日 18:37 汪洋大海 暂无评论 阅读 106 views 次
<tr >
   <td>7</td>
   <td>抢定中</td>
   <td>未开启</td>
   <td>未设定</td>
   <td id="Multi-word">我们要控制这里,文字太长需要隐藏,然后点击显示全部文字,再次点击又隐藏很多文字。</td>
</tr>
                            
<tr >
   <td>6</td>
   <td>已完成</td>
   <td>已开启</td>
   <td>2019-12-10 10:00:00</td>
   <td id="Multi-word">预定成功!</td>
</tr>

上面是html代码,下面是jquery的代码。

$(document).ready(function () {
            var MaxLength = 20;//先设置一个变量用做第一行最多显示的长度
            var txt = new Array();//定义一个数组
            var texts = $("[id='Multiword']");//获取一下每一个放置文字的div,一组div
            for (var i = 0; i < texts.length; i++) {//写一个循环,循环次数为所有放置文字div的数量
                if (texts.eq(i).text().length > MaxLength) {
                    texts.eq(i).parent().index(i);//给每个索引上的div的父级赋一个index属性,也就是这个段文字在数组内的索引
                    txt[i] = texts.eq(i).text();//将获取的一组文字div按照索引一次将文字放进数组
                    var st = texts.eq(i).text().substr(0, MaxLength) + '……[展开]';//一上来默认第一行显示长度为上面定义的变量长度,后面加...放进变量
                    texts.eq(i).text(st);//再将变量给每组文字的显示
                }
            }

            //每组文字div的点击事件
            $("[id='Multiword']").click(function () {
                if ($(this).outerHeight() > 77) {//如果这个div的高度超过了每行的高度,则执行超出部分隐藏
                    $(this).text($(this).text().substr(0, MaxLength) + '……');//将显示文字重新定义为初始状态
                    //给外面包着的div,也就是父级div写一个动画,高度为目前重新定以后文字高度,400毫秒慢慢缩回,用到animate
                    $(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'yellow' }, 400);
                }
                else {//如果没有超过每行高度,也就是为初始状态的时候,点击需要慢慢下拉打开
                    $(this).text(txt[$(this).parent().index()]);//通过父级的index值找到数组内对应索引的文字,将其显示
                    $(this).css('height', 'auto');//设置这个div的css样式,高度为文字显示高度
                    //因为父级div样式表中设置超出部分隐藏,用animate将高度慢慢下拉至子及div,也就是文字div目前的高度,400毫秒执行完毕
                    $(this).parent().animate({ height: $(this).outerHeight(), backgroundColor: 'white' }, 400);

                }
            });
        });

文字来源:https://www.cnblogs.com/zyg316/p/5763196.html

布施恩德可便相知重

微信扫一扫打赏

支付宝扫一扫打赏

×

给我留言