900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > js写多余文字用省略号表示 点击可显示隐藏

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

时间:2022-11-26 02:41:03

相关推荐

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

因为是多段文字的隐藏,用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是按钮的classvar 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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。