不喜欢废话,直接上代码吧.项目是基于VUE的。

js:



// getDataList();
accountVue = new Vue({
el: '#Content',
data: {
dataList: [],
listState: [],
currSelectIdx: -1,
},
mounted: function() {
getDataList(this);
},
methods: {


showListDetail: function(index) {


var self = this;
var tempList = [];
self.currSelectIdx = index;
var lastOpenIndex = -2;
console.log(this.listState);
for(var i = 0; i < this.listState.length; i++) {
if(index == i) {
if(this.listState[i] == 0) {
tempList.push(1);
} else {
self.currSelectIdx = -1;
lastOpenIndex = i;
tempList.push(0);
console.log("-----------: " + lastOpenIndex)
}
} else {


if(this.listState[i] == 1) {
lastOpenIndex = i;
}
tempList.push(0);
}
}
setTimeout(function() {


var liChilds = $("#dataList0")[0].children;
var zdMenuHeight = $("#zdMenu_" + index).height();


if(liChilds[index + 1] && tempList[index] == 1) {


liChilds[index + 1].style.marginTop = zdMenuHeight * -1 + "px";
$(liChilds[index + 1]).animate({
marginTop: "0px",


}, 600, function() {


});
}
if(liChilds[lastOpenIndex + 1]) {
$("#zdMenu_" + lastOpenIndex)[0].style.display = "block";
// liChilds[lastOpenIndex + 1].style.marginTop = zdMenuHeight + "px";
$(liChilds[lastOpenIndex + 1]).animate({
marginTop: $("#zdMenu_" + index).height() * -1 + "px",


}, 600, function() {
liChilds[lastOpenIndex + 1].style.marginTop = "0px";
$("#zdMenu_" + lastOpenIndex)[0].style.display = "none";
});
}
})


this.listState = tempList;
}

},
updated: function() {


}


})

html:

<div class="ub ub-ver ub-f1" id="recordId" v-cloak="">

<div id="remescroll" class="ub-f1 mescroll">
<div id="redataList" class="order-list" >
<div class="" v-for="(item,index) in detailInfo">
<div class="ub uh1p9 ub-ver ub-pc upl_p90625">{{getThisMonth(item.Date)}}</div>
<div class="ub c-wh ub-f1 uh5p25 ub-pc upl_p875 ubb b_gra9 upr_p875" v-for="dt in item.Items" @click="jumpDetails(dt)">
<div class="ub ub-ver ub-pc ">


<div class="ub img_dzqb uw2p5 uh2p5 "></div>
</div>
<div class="ub ub-f1 upl_p875 upt_p875">
<div class="ub ub-ver">
<p class="ufp8125">{{dt.MerName}}</p>
<p v-if="dt.TransType!=null" class="ufp8125 upt_p625">【{{dt.TransType}}】</p>
<p v-if="dt.TransType==null" class="ufp8125 upt_p625"></p>
<p class="ufp625 upt_p78 c-gra6">{{dt.TransDate}}</p>
</div>
</div>
<div class="ub upt_1 ufp1">{{dt.Amount}}</div>
</div>


</div>
</div>
</div>

</div>

最后效果:



Logo

前往低代码交流专区

更多推荐