html:
- <div id="box">
- <ul>
- <li v-for= "(item,index) in arry">
- <h3 v-text="item.txt" @click="show(index,xian)" @mouseover="show(index,xian)" :class="index === flg ?'red':''"></h3>
- <ol v-show="index === flg ? xian : false">
- <li v-for="(list,idx) in item.cont" v-text="list" class="name"></li>
- </ol>
- </li>
- </ul>
- </div>
JS:
- <script>
- // 渲染
- new vue({
- el: "#box",
- data:{
- flg:-1,
- xian:false,
- isShow:true,
- arry:[
- {"txt":"这是第 1 个 div 标签","cont":["zhang_1","li_1","wang_1"]},
- {"txt":"这是第 2 个 div 标签","cont":["zhang_2","li_2","wang_2"]},
- {"txt":"这是第 3 个 div 标签","cont":["zhang_3","li_3","wang_3"]}
- ]
- },
- // 所有的事件方法集合
- methods: {
- show(idx){
- // 判断是不是点击的自身, 如果不是自身, 直接显示子元素. 其他隐藏
- if(idx != this.flg){
- this.flg = idx;
- this.xian = true;
- }else{
- // 如果是自身, 判断它是显示还是隐藏, 显示就隐藏, 隐藏就显示
- if(this.xian == false){
- this.xian = true;
- this.flg = idx;
- }else{
- this.xian = false;
- }
- }
- }
- }
- })
- </script>
效果:
总结:
一般用于 pc 端的菜单栏.
思路:
1. 先判断它点击是否是自己
2. 在判断它的子元素 显示 or 隐藏
来源: http://www.bubuko.com/infodetail-2771827.html