vue 列表单击显示当前列表内容隐藏其他的列表页，多次点击实现显示隐藏的功能

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)
	   	},
}

　　

显示结果