js怎么實(shí)現(xiàn)循環(huán)列表點(diǎn)擊展開(kāi)收起關(guān)閉效果
這篇文章主要講解了“js怎么實(shí)現(xiàn)循環(huán)列表點(diǎn)擊展開(kāi)收起關(guān)閉效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“js怎么實(shí)現(xiàn)循環(huán)列表點(diǎn)擊展開(kāi)收起關(guān)閉效果”吧！
創(chuàng)新互聯(lián)主營(yíng)西陵網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開(kāi)發(fā),西陵h5重慶小程序開(kāi)發(fā)公司搭建,西陵網(wǎng)站營(yíng)銷(xiāo)推廣歡迎西陵等地區(qū)企業(yè)咨詢
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}}">展開(kāi)</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ù)組、深淺拷貝、本地存儲(chǔ)、清除浮動(dòng)、狀態(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: '什么是前端，簡(jiǎn)單講就是在程序開(kāi)發(fā)中，跟美工設(shè)計(jì)人員打交道比較多的部分?；蛘咧v是展現(xiàn)給多數(shù)用戶的操作界面部分，操作界面可以是實(shí)體的（比如遙控器、按鍵面片等），也可以是虛擬的（比如顯示器里的各種窗口）。大多數(shù)情況下，我們使用的是虛擬界面，也就是利用計(jì)算機(jī)圖形功能，在顯示器中畫(huà)出來(lái)供我們操作的部分。虛擬界面的好處就是輸入設(shè)備簡(jiǎn)單（通常一個(gè)鼠標(biāo)加一塊鍵盤(pán)就行了），還有就是靈活容易變通，如果客戶對(duì)界面不太滿意，改動(dòng)起來(lái)相對(duì)容易點(diǎn)。因?yàn)槭翘摂M的圖形，所以理論上是可以任意進(jìn)行延伸的，比如二維的圖形不能滿足要求了，還可以三維的設(shè)計(jì)。'
}, {
title: '后端技術(shù)',
isShow: false,
desc: '很多人在開(kāi)發(fā)過(guò)程中不太關(guān)注數(shù)據(jù)庫(kù)，對(duì)于表結(jié)構(gòu)的設(shè)計(jì)也沒(méi)什么講究大多屬于“能用就行”，但是根據(jù)作者將近十年的開(kāi)發(fā)經(jīng)驗(yàn)來(lái)看的話，只要你是從事 Web 相關(guān)領(lǐng)域開(kāi)發(fā)你就無(wú)法避免不和數(shù)據(jù)庫(kù)打交道，在Web開(kāi)發(fā)中大多功能操作本質(zhì)上都是對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作，不管你用是 Pythod，Java，Ruby 等語(yǔ)言進(jìn)行 Web 開(kāi)發(fā)，你其實(shí)都是在面向數(shù)據(jù)庫(kù)進(jìn)行編程'
}, {
title: 'UI設(shè)計(jì)師',
isShow: false,
desc: 'UI，即用戶界面（User Interface）是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介。簡(jiǎn)而言之，UI設(shè)計(jì)師就是設(shè)計(jì)用戶界面。一般我們手機(jī)上app的界面都是UI設(shè)計(jì)師需要設(shè)計(jì)的。通俗易懂點(diǎn)說(shuō)，UI就是做界面的，最重要的部分是app界面，看到手機(jī)里各種app沒(méi)？大部分展現(xiàn)在你面前的東西，都是UI設(shè)計(jì)師需要做的。'
}
]js點(diǎn)擊事件
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
})
}
}有一些情況下后臺(tái)不傳給你標(biāo)示（isShow）這就需要自己js手動(dòng)添加
下面的map以及forEach都可以手動(dòng)添加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)列表，點(diǎn)擊展開(kāi)，其余的關(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
}
}
},多層展開(kāi)關(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 >展開(kāi)</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 >展開(kāi)</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'>時(shí)間：</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'
}]
}
]//點(diǎn)擊最外層列表展開(kāi)收起
listTap(e){
console.log('觸發(fā)了最外層');
let Index = e.currentTarget.dataset.parentindex,//獲取點(diǎn)擊的下標(biāo)值
list=this.data.list;
list[Index].show = !list[Index].show || false;//變換其打開(kāi)、關(guān)閉的狀態(tài)
if (list[Index].show){//如果點(diǎn)擊后是展開(kāi)狀態(tài)，則讓其他已經(jīng)展開(kāi)的列表變?yōu)槭掌馉顟B(tài)
this.packUp(list,Index);
}
this.setData({
list
});
},
//點(diǎn)擊里面的子列表展開(kāi)收起
listItemTap(e){
let parentindex = e.currentTarget.dataset.parentindex,//點(diǎn)擊的內(nèi)層所在的最外層列表下標(biāo)
Index=e.currentTarget.dataset.index,//點(diǎn)擊的內(nèi)層下標(biāo)
list=this.data.list;
console.log(list[parentindex].item,Index);
list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//變換其打開(kāi)、關(guān)閉的狀態(tài)
if (list[parentindex].item[Index].show){//如果是操作的打開(kāi)狀態(tài)，那么就讓同級(jí)的其他列表變?yōu)殛P(guān)閉狀態(tài)，保持始終只有一個(gè)打開(kā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});
},
//讓所有的展開(kāi)項(xiàng)，都變?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怎么實(shí)現(xiàn)循環(huán)列表點(diǎn)擊展開(kāi)收起關(guān)閉效果”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)js怎么實(shí)現(xiàn)循環(huán)列表點(diǎn)擊展開(kāi)收起關(guān)閉效果這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
當(dāng)前名稱：js怎么實(shí)現(xiàn)循環(huán)列表點(diǎn)擊展開(kāi)收起關(guān)閉效果
本文網(wǎng)址：http://aaarwkj.com/article44/gpjghe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站維護(hù)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)站內(nèi)鏈
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- SEO如何步步為營(yíng)解決網(wǎng)站排名問(wèn)題？ 2016-11-24
- 網(wǎng)站排名不穩(wěn)定的因素是什么?應(yīng)該如何解決 2015-12-22
- 【網(wǎng)絡(luò)推廣】網(wǎng)站排名怎樣上百度首頁(yè)如何提高網(wǎng)站的百度排名 2022-04-16
- 網(wǎng)站排名下降原因如何排查 2014-11-13
- 網(wǎng)站排名下降的原因有哪些如何解決? 2021-12-31
- 網(wǎng)站排名第一了，為什么仍需要繼續(xù)優(yōu)化？ 2015-12-23
- 優(yōu)化網(wǎng)站排名要這么做 2013-08-09
- 提高網(wǎng)站排名的方法 2013-06-03
- 網(wǎng)站設(shè)計(jì)制作中哪幾點(diǎn)影響網(wǎng)站排名 2016-08-03
- 決定網(wǎng)站排名的秘密 2020-01-03
- alexa網(wǎng)站排名分析 2013-06-17
- 促進(jìn)網(wǎng)站排名提升的重要因素 2013-08-10