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

　　

顯示結果