<template>
<div>
<div class="firstLeverContainer" v-for="menu in menus">
<div class="firstLever close" @click="openOrLoadChild(menu)">
<span class="title">{{menu.menuName}}</span>
<span class="drop">
<i class="fa fa-angle-down"></i>
</span>
</div>
<div class="secondAllLeverContainer" v-bind:class="{isShow:isShow}">
<child-menu v-for="childMenu in childMenus"></child-menu>
</div>
</div>
</div>
</template>
比如:我点击第一元素,所有的secondAllLeverContainer都展开了,因为isShow是全局的,如何做,才能只执行当前循环体的中的事件呢
看你需要的效果是什么的,1L的办法可以实现每一项的显示和隐藏的切换,就是可以同时显示多项,点击的时候只要把对应的isShow取反就可以;
如果是每次只显示一项的话,就可以直接定义一个全局变量记录当前显示项的下标或者数组中的ID等唯一性的标识
<template>
<div>
<div class="firstLeverContainer" v-for="menu,index in menus">
<div class="firstLever close" @click="openOrLoadChild(index)">
<span class="title">{{menu.menuName}}</span>
<span class="drop">
<i class="fa fa-angle-down"></i>
</span>
</div>
<div class="secondAllLeverContainer" v-bind:class="{isShow:isShow===index}">
<child-menu v-for="childMenu in childMenus"></child-menu>
</div>
</div>
</div>
</template>
openOrLoadChild(index){
this.isShow=index
}
menus 是一个列表对吧 ,
//给menus 列表中的每一个元素添加一个额外的属性值,isShow
menus = this.map(menu=>{
menu.isShow = false;
return menu;
})
<div class="secondAllLeverContainer" v-bind:class="{isShow:isShow}">
<child-menu v-for="childMenu in childMenus"></child-menu>
</div>
//改为 isShow -->menu.isShow 既可
<div class="secondAllLeverContainer" v-bind:class="{isShow:menu.isShow}">
<child-menu v-for="childMenu in childMenus"></child-menu>
</div>
<template>
<div>
<div class="firstLeverContainer" v-for="(menu,index) in menus">
<div class="firstLever close" @click="openOrLoadChild(menu,index)">
<span class="title">{{menu.menuName}}</span>
<span class="drop">
<i class="fa fa-angle-down"></i>
</span>
</div>
<div class="secondAllLeverContainer" style="display:none;">
<child-menu v-for="childMenu in childMenus"></child-menu>
</div>
</div>
</div>
</template>
openOrLoadChild: function(menu,index) {
let sub_menu = this.$el.querySelectorAll('.secondAllLeverContainer');
for(let j = 0,len=sub_menu.length; j < len; j++) {
if(index == j) {
if(sub_menu[j].style.display == "none") {
sub_menu[j].style.display = "block";
} else {
sub_menu[j].style.display = "none";
}
} else if(sub_menu[j].style.display == "block") {
sub_menu[j].style.display = "none";
}
}
},