jquery实现多余文字显示或隐藏

最新推荐文章于 2023-09-22 01:00:54 发布

原创最新推荐文章于 2023-09-22 01:00:54 发布 · 7.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript & jquery 同时被 2 个专栏收录

25 篇文章

订阅专栏

css & 网页技术

12 篇文章

订阅专栏

本文介绍了一种在网页上实现文本内容折叠与展开的方法，通过JavaScript代码控制文本的显示长度，超过部分以省略号代替，并提供查看全部与隐藏的交互功能。


实现目标：在一单元格中显示部分内容，多余出来的内容隐藏，在显示的内容后面有省略号与显示按钮，点击显示后，显示全部文字，并显示隐藏按钮，javascript代码如下：

// 每行显示21个字，超过省略，用查看更多
                    var disLen = 29;
                    var len = detail.length;

                    if (len > disLen) {
                        detail ="<div>" + detail.substring(0, disLen) + "<span style='font-size:25px' class='hide" + i + "'>...</span><span class='hide" + i
                        + "' style = 'display:none'>" + detail.substring(disLen + 1, len)
                        + "</span> </div><div><a href='#youhui' onclick='showHideCode(" + i + ")'><span class='hide" + i
                        + "'>查看更多</span><span class='hide" + i + "' style = 'display:none'>隐藏</span></a></div>";
                    }


function showHideCode(i) {
            $(".hide" + i).toggle();            
        }

上面detail字符串就是要实现的代码。