小程序开发中，纯css实现内容收起折叠功能

不多说，直接上代码：

wxml页面：

<!--收起折叠 begin--> <view style='width:100%;background:#fff;border-top:1px solid #d7d7d7;'> <view style='float:left;width:200px;height:90px;display:{{displaymore}}' bindtap='sourcelistshow'>全部课程</view> <view style='float:left;width:200px;height:90px;display:{{displayless}}' bindtap='sourcelistless'>点击收起</view> <view style='height:200px;width:80%;background:#fff;float:left;border:1px solid #000;display:{{display}}'>隐藏的内容</view> <view style='float:left;height:200px;width:80%;background:#fff;border:1px solid #000'>123123123123</view> </view> <!--收起折叠 end--> View Code

js页面：

Page({ data: { display:'none', displaymore:'block', displayless: 'none' }, sourcelistshow: function(){ console.log('more') var that = this that.setData({ display: 'block', displaymore:'none',displayless:'block' }) }, sourcelistless: function () { console.log('less') var that = this that.setData({ display: 'none', displaymore: 'block', displayless: 'none' }) } View Code

 

转载于:https://www.cnblogs.com/yuan9580/p/10083376.html

相关资源：Vue 中文本内容超出规定行数后展开收起的处理的实现方法