js怎么實現(xiàn)循環(huán)列表點擊展開收起關(guān)閉效果

這篇文章主要講解了“js怎么實現(xiàn)循環(huán)列表點擊展開收起關(guān)閉效果”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“js怎么實現(xiàn)循環(huán)列表點擊展開收起關(guān)閉效果”吧！

html部分

<view class="listMain">
  <view class="list" wx:for="{{list}}" wx:key="index">
    <view class="title">{{item.title}}</view>
    <view class="desc {{item.isShow ? 'show' : 'hide'}}">{{item.desc}}</view>
    <text class="listBtn" bindtap="listBtn" wx:if="{{!item.isShow}}" data-index="{{index}}">展開</txt>
    <text class="listBtn" bindtap="listBtn" wx:if="{{item.isShow}}" data-index="{{index}}">關(guān)閉</text>
  </view>
</view>

css部分

.listMain {
  padding: 30rpx;
}
.listMain .list{
  border-bottom: 1rpx solid #ddd;
  padding: 20rpx 10rpx;
  position: relative;
}
.listMain .list .title{
  font-size: 30rpx;
  color: #333;
  width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 10rpx;
}
.listMain .list .desc{
  font-size: 24rpx;
  color: #666;
}
.listMain .list .listBtn{
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  color: #999;
  font-size: 26rpx;
}
.show{ display: block;}
.hide{ display: none;}

data部分

list: [
      {
        title: '前端技術(shù)匯總',
        isShow: false,
        desc: 'html、div+css+js、選擇器、居中、閉包、繼承、網(wǎng)站重構(gòu)、優(yōu)化、迭代、盒模型、BFC、數(shù)組、深淺拷貝、本地存儲、清除浮動、狀態(tài)碼等等'
      }, {
        title: '前端技術(shù)框架',
        isShow: false,
        desc: 'vue、angular、react、bootstrap、backbone、jquery、lay ui、amaze ui、zepot、ionic、flutter、require、echart等等'
      }, {
        title: '前端技術(shù)延伸',
        isShow: false,
        desc: '什么是前端，簡單講就是在程序開發(fā)中，跟美工設(shè)計人員打交道比較多的部分?；蛘咧v是展現(xiàn)給多數(shù)用戶的操作界面部分，操作界面可以是實體的（比如遙控器、按鍵面片等），也可以是虛擬的（比如顯示器里的各種窗口）。大多數(shù)情況下，我們使用的是虛擬界面，也就是利用計算機圖形功能，在顯示器中畫出來供我們操作的部分。虛擬界面的好處就是輸入設(shè)備簡單（通常一個鼠標加一塊鍵盤就行了），還有就是靈活容易變通，如果客戶對界面不太滿意，改動起來相對容易點。因為是虛擬的圖形，所以理論上是可以任意進行延伸的，比如二維的圖形不能滿足要求了，還可以三維的設(shè)計。'
      }, {
        title: '后端技術(shù)',
        isShow: false,
        desc: '很多人在開發(fā)過程中不太關(guān)注數(shù)據(jù)庫，對于表結(jié)構(gòu)的設(shè)計也沒什么講究大多屬于“能用就行”，但是根據(jù)作者將近十年的開發(fā)經(jīng)驗來看的話，只要你是從事 Web 相關(guān)領(lǐng)域開發(fā)你就無法避免不和數(shù)據(jù)庫打交道，在Web開發(fā)中大多功能操作本質(zhì)上都是對數(shù)據(jù)庫進行操作，不管你用是 Pythod，Java，Ruby 等語言進行 Web 開發(fā)，你其實都是在面向數(shù)據(jù)庫進行編程'
      }, {
        title: 'UI設(shè)計師',
        isShow: false,
        desc: 'UI，即用戶界面（User Interface）是系統(tǒng)和用戶之間進行交互和信息交換的媒介。簡而言之，UI設(shè)計師就是設(shè)計用戶界面。一般我們手機上app的界面都是UI設(shè)計師需要設(shè)計的。通俗易懂點說，UI就是做界面的，最重要的部分是app界面，看到手機里各種app沒？大部分展現(xiàn)在你面前的東西，都是UI設(shè)計師需要做的。'
      }
    ]

js點擊事件

listBtn (e) {
    var that = this
    let index = e.currentTarget.dataset.index
    let currect = "list["+index+"].isShow"
    if (that.data.list[index].isShow === true) {
      console.log("隱藏")
      that.setData({
        [currect]: false
      })
    } else{
      console.log("顯示")
      that.setData({
        [currect]: true
      })
    }
  }

有一些情況下后臺不傳給你標示（isShow）這就需要自己js手動添加

下面的map以及forEach都可以手動添加isShow字段

onLoad: function () {
    var that = this
    let dataList = that.data.list
    // dataList.forEach(function(item, index){
    //   dataList[index].isShow = false
    // })
    dataList.map((item, index)=>{
      dataList[index].isShow = false
    })
    that.setData({
      list: dataList
    })
  },

2、循環(huán)列表，點擊展開，其余的關(guān)閉

data數(shù)據(jù)以及html和css代碼同上面一樣

listBtn (e) {
    let that = this
    let index = e.currentTarget.dataset.index
    let dataList = that.data.list
    dataList[index].isShow = !dataList[index].isShow
    if (dataList[index].isShow){
      that.packUp(dataList,index);
    }
    that.setData({
      list: dataList
    })
  },
  packUp(data,index){
    for (let i = 0, len = data.length; i < len; i++) {
      if(index!=i){
        data[i].isShow = false
      }
    }
  },

多層展開關(guān)閉列表

<view class='list_box' wx:for='{{list}}' wx:key='this' wx:for-item='parentItem' wx:for-index='parentIndex' >
    <view class='list'>
        <view class='list_name_box' catchtap='listTap' data-parentindex='{{parentIndex}}'>
            <text class='list_item_name'>{{parentItem.listName}}</text>
            <text class='icon_down' wx-if='{{parentItem.show&&"icon_down_rotate"}}'>關(guān)閉</text>
            <text class='icon_down' wx:else >展開</text>
        </view>
        <view class='list_item_box' wx:if='{{parentItem.show}}'>
            <view class='list_item' wx:for='{{parentItem.item}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}'  data-parentindex='{{parentIndex}}'>
                <view class='list_item_name_box'>
                    <text class='list_item_name'>{{item.itemName}}</text>
                    <text class='icon_down' wx:if='{{item.show&&"icon_down_rotate"}}'>關(guān)閉</text>
                    <text class='icon_down' wx:else >展開</text>
                </view>
                <view class='other_box' wx:if='{{item.show}}'>
                    <view class='other'>
                        <text class='other_title'>內(nèi)容：</text>
                        <text class='other_text'>{{item.content}}</text>
                    </view>
                    <view class='other'>
                        <text class='other_title'>時間：</text>
                        <text class='other_text'>{{item.time}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

page{
  background: #f3f7f7;
}
.list_name_box{
  background: #fff;
  border-bottom: 1px solid #efefef;
  display: flex;
  height: 90rpx;
  align-items: center;
  padding: 0 25rpx;
  font-size: 32rpx;
}
.list_item_name{
  flex: 1;
}
.list_item_name_box{
  background: #fff;
  font-size: 30rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 25rpx 0 50rpx;
}
.other{
  display: flex;
  height: 80rpx;
  padding: 0 25rpx 0 50rpx;
  align-items: center;
  font-size: 30rpx;
  color: #666;
}
.icon_down_rotate{
  transform:rotate(180deg);
}

list:[
      {listName:'列表1',
       item:[{
         itemName:'子列表1-1',
         content:'1-1中的內(nèi)容',
         time: '2015-05-06'
       }, {
           itemName: '子列表1-2',
           content: '1-2中的內(nèi)容',
           time: '2015-04-13'
       }, {
           itemName: '子列表1-3',
           content: '1-3中的內(nèi)容',
           time: '2015-12-06'
       }]
      }, 
      {
        listName: '列表2',
        item: [{
          itemName: '子列表2-1',
          content: '2-1中的內(nèi)容',
          time: '2017-05-06'
        }, {
          itemName: '子列表2-2',
          content: '2-2中的內(nèi)容',
          time: '2015-08-06'
        }, {
          itemName: '子列表2-3',
          content: '2-3中的內(nèi)容',
          time: '2015-11-06'
        }]
      }, {
        listName: '列表3',
        item: [{
          itemName: '子列表3-1',
          content: '3-1中的內(nèi)容',
          time: '2015-05-15'
        }, {
          itemName: '子列表3-2',
          content: '3-2中的內(nèi)容',
          time: '2015-05-24'
        }, {
          itemName: '子列表1-3',
          content: '3-3中的內(nèi)容',
          time: '2015-05-30'
        }]
      }
    ]

//點擊最外層列表展開收起

listTap(e){
    console.log('觸發(fā)了最外層');
    let Index = e.currentTarget.dataset.parentindex,//獲取點擊的下標值
        list=this.data.list;
    list[Index].show = !list[Index].show || false;//變換其打開、關(guān)閉的狀態(tài)
    if (list[Index].show){//如果點擊后是展開狀態(tài)，則讓其他已經(jīng)展開的列表變?yōu)槭掌馉顟B(tài)
      this.packUp(list,Index);
    }
    this.setData({
      list
    });
  },
  //點擊里面的子列表展開收起
  listItemTap(e){
    let parentindex = e.currentTarget.dataset.parentindex,//點擊的內(nèi)層所在的最外層列表下標
        Index=e.currentTarget.dataset.index,//點擊的內(nèi)層下標
        list=this.data.list;
    console.log(list[parentindex].item,Index);
    list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//變換其打開、關(guān)閉的狀態(tài)
    if (list[parentindex].item[Index].show){//如果是操作的打開狀態(tài)，那么就讓同級的其他列表變?yōu)殛P(guān)閉狀態(tài)，保持始終只有一個打開
      for (let i = 0, len = list[parentindex].item.length;i<len;i++ ){
        if(i!=Index){
          list[parentindex].item[i].show=false;
        }
      }
    }
    this.setData({list});
  },
  //讓所有的展開項，都變?yōu)槭掌?
  packUp(data,index){
    for (let i = 0, len = data.length; i < len; i++) {//其他最外層列表變?yōu)殛P(guān)閉狀態(tài)
      if(index!=i){
        data[i].show = false;
        for (let j=0;j<data[i].item.length;j++){//其他所有內(nèi)層也為關(guān)閉狀態(tài)
            data[i].item[j].show=false;
        }
      }
    }
  },

感謝各位的閱讀，以上就是“js怎么實現(xiàn)循環(huán)列表點擊展開收起關(guān)閉效果”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對js怎么實現(xiàn)循環(huán)列表點擊展開收起關(guān)閉效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！