今天在项目碰到一个问题，之前在项目首页实现单列表的显示和隐藏，通过wx:if判断就可实现，现在要实现多列表的单项显示和隐藏功能应该如何实现呢？如果还用wx:if实现的话会出现点击一个列表项，多个列表同时显示和隐藏，明显不适合功能需求，然后简单地查了资料也没发现有类似的功能，最后思考一番后，慢慢地理清了思路...
<!--pages/myOrder/myOrder.wxml--><view class='container'> <!-- 订单列表 --> <block wx:for-items="{{carInfoData}}"> <view class='card b-shadow' bindtap='toggleBtn' id="{{item.id}}"> <view class='nearCard-fl'> <image src='{{item.imgurl}}'></image> </view> <view class='nearCard-fr'> <view>日期： <text class='c-green'>{{item.useDate}}</text> </view> <view>车型： <text class='c-green'>{{item.cx}}</text> </view> <view>时长： <text class='c-green'>{{item.time}}</text> </view> <view>费用： <text class='c-green'>{{item.feiyong}}</text> </view> </view> <view class='down clearfix {{uhide==item.id?"":"hidden"}}'> <view class='ml30'>启用时间：2018.01.01 11:33</view> <view class='ml30'>结束时间：2018.01.01 11:33</view> <view class='ml30'>租赁地区：舟山市桃花岛景区海湾浪琴</view> <view class='feedBack'>意见反馈</view> </view> </view> </block></view>// pages/myOrder/myOrder.jsPage({ /** * 页面的初始数据 */ data: { uhide: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; var data = { "datas": [ { "id": 1, "imgurl": "../../images/car.png", "useDate": "2017-12-22", "cx": "奇瑞EQ1", "time": "1小时", "feiyong": "20元" }, { "id": 2, "imgurl": "../../images/car.png", "useDate": "2017-12-22", "cx": "奇瑞EQ1", "time": "1小时", "feiyong": "20元" }, { "id": 3, "imgurl": "../../images/car.png", "useDate": "2017-12-22", "cx": "奇瑞EQ1", "time": "1小时", "feiyong": "20元" }, { "id": 4, "imgurl": "../../images/car.png", "useDate": "2017-12-22", "cx": "奇瑞EQ1", "time": "1小时", "feiyong": "20元" } ] }; //console.log(data.datas); //设置车辆展示信息 that.setData({ carInfoData: data.datas }) }, //点击切换隐藏和显示 toggleBtn: function (event) { var that = this; var toggleBtnVal = that.data.uhide; var itemId = event.currentTarget.id; if (toggleBtnVal == itemId) { that.setData({ uhide: 0 }) } else { that.setData({ uhide: itemId }) } }}) 
