Vue 实现互斥弹层菜单，并可以关闭当前菜单的方法

实现需求：
1、互斥显示菜单
2、切换显示隐藏菜单

效果

代码

<template>
  <ul>
    <li
      v-for="(row, indexs) in menus"
      :key="indexs"
      :class="{ active: row.active }"
    >
      <div class="title" @click="addClass(row, indexs)">{{ row.header }}</div>
      <div class="panel">
        <h4>{{ row.header }}</h4>
        <ul>
            <li v-for="(item, index) in row.list" :key="index">
                {{ item.title }}
            </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

JS

export default {
  name: "Main",
  data() {
    return {
      menus: [
        {
            header: "手机",
            active: false,
            list: [
                {
                    title: 'HUAWEI Mate系列'
                },{
                    title: 'HUAWEI P系列'
                },{
                    title: 'HUAWEI nova系列'
                },{
                    title: '华为畅享系列'
                },{
                    title: '查看全部'
                }
            ]
        },
        { 
            header: "智能穿戴", 
            active: false,
            list: [
                {
                    title: '智能手表'
                },{
                    title: '儿童手表'
                },{
                    title: '智能手环'
                },{
                    title: 'VR'
                },{
                    title: '智能体脂秤'
                }
            ]
        },
        { 
            header: "耳机音箱", 
            active: false,
            list: [
                {
                    title: '真无线耳机'
                },{
                    title: '有线耳机'
                },{
                    title: '蓝牙耳机'
                },{
                    title: '蓝牙音箱'
                },{
                    title: '智能眼镜'
                }
            ]
        },
        { 
            header: "智慧屏", 
            active: false,
            list: [
                {
                    title: '华为智慧屏V系列'
                },{
                    title: '华为智慧屏S系列'
                },{
                    title: '华为智慧屏X系列'
                },{
                    title: '智慧屏配件'
                },{
                    title: '查看全部'
                }
            ]
        },
        {   
            header: "电脑", 
            active: false,
            list: [
                {
                    title: '华为MateBook X系列'
                },{
                    title: '华为MateBook系列'
                },{
                    title: '华为MateBook D系列'
                },{
                    title: '华为MateBook B系列'
                },{
                    title: '华为显示器'
                }
            ]
        },
        {   
            header: "平板", 
            active: false,
            list: [
                {
                    title: '华为MatePad 系列'
                },{
                    title: '华为M系列'
                },{
                    title: '华为畅享 系列'
                },{
                    title: '平板配件'
                },{
                    title: '查看全部'
                }
            ]
        },
        {   
            header: "配件", 
            active: false,
            list: [
                {
                    title: '充电器/线材'
                },{
                    title: '移动电源'
                },{
                    title: '自拍杆/支架'
                },{
                    title: '摄像机/镜头'
                },{
                    title: '保护壳'
                }
            ]
        },
      ],
    };
  },

  methods: {
    addClass: function (row, indexs) {
      // 隐藏所有
      this.menus.forEach((t, i) => {
        if (i !== indexs) {
          t.active = false;
        }
      });
      // 显示当前或隐藏当前
      row.active = !row.active;
    },
  },
};

CSS

ul {
    margin: 0;
    padding: 0;
}
li {
    width: 200px;
    padding: 5px 10px;
    list-style-type: none;
    line-height: 2;
    cursor: pointer;
}
li.active {
    background-color: #f2f2f2;
}
.panel {
    display: none;
    position: absolute;
    top: 0;
    left: 200px;
    width: 400px;
    height: 500px;
    padding: 10px;
    background-color: #f2f2f2;
}
.panel h4 {
    margin: 5px 0;
    padding: 0 10px;
}
.active .panel {
  display: block;
}

.title {
  color: #666;
}
.active .title {
  color: red;
}