1.//class -- sel_div已经把样式写好了;通过控制sel_div来控制样式的展示情况;
2.单击时,重新给showQA赋值为index;showQA与下标相同时,显示样式;同一时间只有一个li满足条件;
3.当第二次点击时,给一个状态开关isStatus,点击 that.isStatus = !that.isStatus;
4.由于是多条数据,所以给了一个数组,通过判断arr判断两次点击为同一条数据,两个条件同时满足,才进行显示;
//判断是否两次点击为同一个列表,isStatus判断两次以上的状态
if(newIndex == before && that.isStatus){
that.showQA = -1;
}
//执行后,改变点击的状态;
that.isStatus = !that.isStatus;
html文件
//class --sel_div已经把样式写好了
<div class="about_problem page_product"> <span class="title">问题与解答</span> <ul id="about_answer"> <div v-for="(itemPro,index) in typeIdPro.sysqatypelist" :class="{sel_div:showQA == index}"> <li @click="getDetails(itemPro.id,index)"><span class="left">{{itemPro.title}}</span><p><span class="icon_close">+</span></p> </li> <div class="con" v-for="(itemPA,index) in listPA"> <router-link :to="{path:'usingSkillsDetails',query:{ id:itemPA.id,cxword:itemPA.cxword,flag:1}}" tag = "p">{{index+1}}、{{itemPA.title}}</router-link> </div> </div> </ul> </div>
js文件方法
data() {
return {
showQA:-1,//默认为0
isStatus:false,
showArr:[],
}
methods:{
//得到问题的答案数据
getDetails:function(getQId,index){
let that = this;
that.showArr.push(index)
console.log(that.isStatus)
let newIndex = that.showArr[that.showArr.length-1];
let before = that.showArr[that.showArr.length-2];
if(newIndex == before && that.isStatus){
that.showQA = -1;
}else{
that.showQA = index;
console.log(getQId);
console.log(that.pids);
var params = { pids:that.pids, typeid:getQId};
proAnsId(params).then(res=> {
console.log(res.data)
that.listPA = res.data;
})
}
//执行完后,改变状态
that.isStatus = !that.isStatus;
console.log(that.showArr)
},
}
显示结果
所有评论(0)