免费网站知乎,三合一企业网站模板,国外的包装设计网站,文件包上传的网站怎么做在上一篇文章实现用js截取文本后#xff0c;我的另一个需求也迎刃而解了。需求就是一段长文本需要溢出隐藏#xff0c;然后点击全部时显示全部文本#xff0c;点击收起又回到溢出隐藏的状态。实现的效果如下图#xff1a; 实现的思路时点击全部时使用这条数据的原文本…在上一篇文章实现用js截取文本后我的另一个需求也迎刃而解了。需求就是一段长文本需要溢出隐藏然后点击全部时显示全部文本点击收起又回到溢出隐藏的状态。实现的效果如下图 实现的思路时点击全部时使用这条数据的原文本点击收起时使用截取后的文本。而父元素的高度是由内部文本撑开的所以点击全部时div的高度也会自动撑开。
this.state {data: [],// 页面的数据expended: [],// 用来管理每条数据的全部/收起的数组
}getContent (value, index) {const { expended } this.statereturn (spanspan{expended[index]? value.content: noMoreWord(value.content, 50, #0091ff)}/span{this.needExpended(value, index)}/span)
}//是否展示 全部/收起needExpended (value, index) {const { expended } this.stateconst { content } valueif (getStrLength(content) 100) {return (span style{{color: #0091ff}} onClick{() this.seeMore(index)}{expended[index]? 收起: 全部}/span)}else{return }}seeMore (index) {const { expended } this.stateconst newExpended [...expended]newExpended[index] !newExpended[index]this.setState({expended: newExpended})}// react的render
render() {return(this.state.data.map((value, index) {divdivxxx/divdiv{this.getContent()}/div/div}))
} 代码中的noMoreWord()和getStrLength()可以去看我的上一篇文章js实现一行半文本的截取_郑板桥30的博客-CSDN博客这里有对这两个方法的详细介绍。
