菜单导航问题，点击的时候会展开列表，再次点击或点击其他会收起，现在是点权限管理出来了，点击电池管理权限管理不会收起，求指导~

Question

Answer 1

data(){
    return {
        leftMenuList: [
         {
              name: '权限管理',
              open: false,
              list: [
              {
                   name: '用户管理'
              },
              {
                   name: '部门管理'
              },
              {
                    name: '角色管理'
              },
              {
                    name: '菜单管理'
              }
              ]
        },
        {
              name: '电池管理',
              open: false,
              list: [
              {
                   name: '用户管理'
              },
              {
                   name: '部门管理'
              },
              {
                   name: '角色管理'
              },
              {
                   name: '菜单管理'
              }
              ]
         }
     ]
  }
},
methods:{
    toggleChildren(item){
        if(!item.open){
            this.leftMenuList.map((v)=>{
               v.open=false
            })
        }
        item.open=!item.open
     }
}

Answer 2

没看到你写收起其它啊，toggleChildren里刷一遍MenuList先都设置成false，或者记一下上次展开的菜单是哪一个，把它设置成false。
我记得vue列表直接更新元素属性好像不会更新？需要用splice在原位置替换一下。自己看吧

Answer 3

老铁 我根据你说的模拟了下测试代码，我这边是可行的，你参考下：

<div id="app">
    <ul>
        <li v-for="menu in menus">
            <a  @click="toggle(menu)">{{menu.name}}</a>
            <ul v-show="menu.open">
                <li v-for="item in menu.list">{{item.name}}</li>
            </ul>

        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                menus: [
                    {
                        name: '权限管理',
                        open: true,
                        list: [
                            {
                                name: '用户管理'
                            },
                            {
                                name: '部门管理'
                            },
                            {
                                name: '角色管理'
                            },
                            {
                                name: '菜单管理'
                            }
                        ]
                    },
                    {
                        name: '电池管理',
                        open: true,
                        list: [
                            {
                                name: '用户管理'
                            },
                            {
                                name: '部门管理'
                            },
                            {
                                name: '角色管理'
                            },
                            {
                                name: '菜单管理'
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            toggle(menu){
                menu.open = !menu.open
            }
        }

    })
</script>

希望可以帮到你,如果要实现你的说的功能需要在toggle中添加方法：

            toggle(menu) {
                if (menu.open = true) {
                    this.menus.forEach((item) => {
                        item.open = false
                        console.log(item)
                    })
                }
                menu.open = !menu.open
            }

Answer 4

Answer 5

1.你的意思是二级菜单不管怎么点击都只展示一个吧,如果是这种需求,请望下看;
2.因为你open属性每个都只是通过menu获取当前点击那个菜单,所以无法改变点击之外菜单的值,我在楼上答案的基础上优化了一点
3.贴上代码:(借用了楼上的代码)

<template>
  <div id="app">
    <ul>
        <li v-for="(menu,index) in menus" :key="index">
            <a  @click="toggle(menu,index)">{{menu.name}}</a>
            <ul v-show="menu.open">
                <li v-for="(item,index) in menu.list" :key="index">{{item.name}}</li>
            </ul>

        </li>
    </ul>
</div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          name: "权限管理",
          open: true,
          list: [
            {
              name: "用户管理"
            },
            {
              name: "部门管理"
            },
            {
              name: "角色管理"
            },
            {
              name: "菜单管理"
            }
          ]
        },
        {
          name: "电池管理",
          open: true,
          list: [
            {
              name: "用户管理"
            },
            {
              name: "部门管理"
            },
            {
              name: "角色管理"
            },
            {
              name: "菜单管理"
            }
          ]
        }
      ]
    };
  },
  methods: {
    toggle(menu,index) {
      if(menu.open){
        menu.open=false
      }else{
        menu.open=true
      }  
      this.menus.forEach((item,indexMenus)=>{
         if(indexMenus!==index){
           item.open=false
         }
      })
    }
  }
};
</script>

4.实际上element有成型的导航栏插件tree中的accordion属性可以控制这种效果,贴上url:http://element.eleme.io/#/zh-...
5.希望能帮到你