題目描述

vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前展開收起功能,現(xiàn)在是點(diǎn)擊都展開、收起

題目來源及自己的思路

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）

<template>
<div class="left">
  <ul>
    <li>首頁</li>
    <li v-for="nav in navList" :key="nav.id" @click="showNav($event)">{{nav.navOne}}
      <i class="iconfont icon-iconfontjiantou"></i>
      <ul class="nav-child" v-show="showTag">
        <li v-for="item in nav.navTwo" :key="item.id">{{item.title}}</li>
      </ul>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: "left",
  data:function(){
    return {
      showTag:false,
      navList:[
      {
        navOne:"資訊管理",
        id:1,
        navTwo:[
          {
            title:"資訊管理",
            id:1,
          }
        ]
      },
      {
        navOne:"圖片管理",
        id:2,
        navTwo:[
          {
            title:"圖片管理",
            id:1
          }
        ]
      },
      {
        navOne:"產(chǎn)品管理",
        id:3,
        navTwo:[
          {
            title:"品牌管理",
            id:1
          },
          {
            title:"分類管理",
            id:2
          },
          {
            title:"產(chǎn)品管理",
            id:3
          }
        ]
      },
      {
        navOne:"評(píng)論管理",
        id:4,
        navTwo:[
          {
            title:"評(píng)論列表",
            id:1
          },
          {
            title:"意見反饋",
            id:2
          }
        ]
      },
      {
        navOne:"會(huì)員管理",
        id:5,
        navTwo:[
          {
            title:"會(huì)員列表",
            id:1
          },
          {
            title:"刪除的會(huì)員",
            id:2
          },
          {
            title:"等級(jí)管理",
            id:3
          },
          {
            title:"積分管理",
            id:4
          },
          {
            title:"瀏覽記錄",
            id:5
          },
          {
            title:"下載記錄",
            id:6
          },
          {
            title:"分享記錄",
            id:7
          }
        ]
      },
      {
        navOne:"管理員管理",
        id:6,
        navTwo:[
          {
            title:"角色管理",
            id:1
          },
          {
            title:"權(quán)限管理",
            id:2
          },
          {
            title:"管理員列表",
            id:3
          }
        ]
      },
      {
        navOne:"統(tǒng)計(jì)管理",
        id:7,
        navTwo:[
          {
            title:"折線圖",
            id:1
          },
          {
            title:"時(shí)間軸折線圖",
            id:2
          }
        ]
      },
      {
        navOne:"系統(tǒng)管理",
        id:8,
        navTwo:[
          {
            title:"系統(tǒng)設(shè)置",
            id:1
          },
          {
            title:"欄目管理",
            id:2
          },
          {
            title:"數(shù)據(jù)字典",
            id:3
          },
          {
            title:"屏蔽詞",
            id:4
          },
          {
            title:"系統(tǒng)日志",
            id:5
          }
        ]
      }
    ]
    }
  },
   methods: {
     showNav(e){
       console.log(e.currentTarget);
       this.showTag = !this.showTag;
     }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .left{
    width:200px;
    position: fixed;
    background: #f5f5f5;
    top:60px;
    left:0;
    height:calc(100% - 60px);
    z-index: 99;
    overflow-y: auto;
  }
  .left ul > li{
    padding:10px;
    border-bottom:dotted 1px #dedede;
    font-size:15px;
    color:#999;
  }
  .left ul > li i{
    margin-left:5px;
  }
  .left ul > li ul li{
    border-bottom:0;
    font-size:14px;
    color:#333;
  }
</style>

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？