微信小程序，循环下拉列表，点击时只展开其中一个

这是效果

1.wxml

<!-- bigwarp --><view ><view   wx:for="{    {detil}}"  wx:for-item="item" wx:key="">    <view   bindtap='showList' data->        <view >{    {item.repairitemsetname}}</view>        <view >        <image data- src="../../images/icon/carDetails1.png"   ></image></view>    </view>    <view  >    <!--  -->        <view wx:for="{    {notice}}" wx:for-item="item" wx:key="" >       <i-row >       <!--  -->       <i-col span="15" i->        <view >       <checkbox-group bindchange="checkboxChange">            <label >              <checkbox value="{    {item.name}}" checked="{    {item.checked}}"/>{    {item.repairitemname}}            </label>         </checkbox-group>         </view>     </i-col>     <!--  -->       <i-col span="9" i->        <view >         <view ><input></input>元</view>        </view>       </i-col>       </i-row>        </view>        <!--  -->    </view></view></view><!-- end -->

2,wxss

/* bigwarp */.rotateRight{  transform: rotate(180deg) }.com-selectBox{    width: 90%;    margin: 0 auto;}.com-sContent{    /* border: 1px solid #e2e2e2; */    background: white;    font-size: 16px;    line-height: 30px;    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(85, 85, 85, 0.13);    border-radius: 20rpx;    height: 100rpx;    margin-top: 40rpx;    display: flex;    justify-content:  space-between;    align-items: center;}.com-sImg{    width: 16px;    height: 9px;}.caricon{  /* border: 1px solid black; */  right: 10px;  display: flex;  justify-content: center;  align-items: center;  width: 15%;  height: 100%;}.com-sTxt{    width: 15%;    /* border: 1px solid black; */    height: 100%;    display: flex;    justify-content: center;    align-items: center;}.com-sList{    box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(85, 85, 85, 0.13);    width: inherit;    position: absolute;    box-sizing: border-box;    z-index: 3;    max-height: 120px;    overflow: auto;}.com-sItem{    height: 55px;    line-height: 35px;    padding: 0 6px;    text-align: left;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    font-size: 14px;}.com-sItem:first-child{    border-top: none;}.dewarp{  margin: 0 auto;  width: 100%;}.carpropectdo{  padding: 10px 10px;}.carpropectdollows{  width:90%;  border: 1rpx solid #D1D1D1;  display: flex;  justify-content: center;  align-items: center;  padding: 0 10rpx;  color: #999999;  font-size: 32rpx;  height: 27px;}.checkbox checkbox{    padding:0 5rpx;}.checkbox{  font-size: 13px;}.cb{  padding: 13rpx 5rpx;}.hide{    display: none;}.select_img_rotate{  transform:rotate(180deg); }/* end */

3.wxjs

// pages/a/a.jsvar app = getApp()Page({  /**   * 页面的初始数据   */  data: {    },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    app.login().then(() => {      this.carDetailtitle(),        this.carDetail()    })  },  showList(e) {    let index = 0;    let arrayItem = this.data.detil;//获取循环数组对象    for (let item of arrayItem) {      //如果当前点击的对象id和循环对象里的id一致      if (item.repairitemsetid == e.currentTarget.dataset.id ) {        //判断当前对象中的isShow是否为true（true为显示，其他为隐藏）         if (arrayItem[index].isShow == "" || arrayItem[index].isShow == undefined) {          arrayItem[index].isShow = "true"          imgshow: !this.data.imgshow        } else {          arrayItem[index].isShow = ""          imgshow: !this.data.imgshow        }      }      index++;              }    //将数据动态绑定     this.setData({      detil: arrayItem    })  },  carDetailtitle(down) {    var a = app.data    libs.post('接口', {      miniopenid: a.openid,      carplate: a.carplate    }, down).then(res => {      console.log(JSON.parse(res))      this.setData({        detil: JSON.parse(res),      })    })  },  carDetail(down) {    var a = app.data    libs.post('接口', {      miniopenid: a.openid,      carplate: a.carplate,      rcid: 7    }, down).then(res => {      console.log(JSON.parse(res))      this.setData({        notice: JSON.parse(res),      })    })  },    checkboxChange: function (e) {    console.log('checkbox发生change事件，携带value值为：', e.detail.value)  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  }})