在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 如何做element-ui頂欄導(dǎo)航和側(cè)欄導(dǎo)航同時(shí)在一起？

如何做element-ui頂欄導(dǎo)航和側(cè)欄導(dǎo)航同時(shí)在一起？

我想把頂欄導(dǎo)航和側(cè)欄導(dǎo)航同時(shí)做的，如果單擊頂欄導(dǎo)航一的時(shí)候，就找到側(cè)欄導(dǎo)航一，這是相對(duì)應(yīng)的菜單。如何應(yīng)該怎么做的？

我想要這種效果，參考以下gif動(dòng)畫：

圖片描述

element-ui demo: jsfiddle：

圖片描述

回答
編輯回答
九年囚

能用JSFiddle寫一個(gè)demo，首先給你點(diǎn)個(gè)贊！方便看到問(wèn)題而且方便回答。
直接在你那個(gè)demo上更改了部分代碼，你點(diǎn)擊查看便可看到效果：https://jsfiddle.net/aL83ucmw/6/

2017年11月23日 03:28
編輯回答
落殤
<div id="app">
  <el-col :span="24" class="header">
    <el-col :span="10" class="logo">
      <br>
    </el-col>
    <el-col :span="10">
      <div class="tools">
        <i class="fa fa-align-justify"></i>
      </div>
    </el-col>
    <el-menu :default-active="currentTopMenu" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">頂欄導(dǎo)航一</el-menu-item>
      <el-menu-item index="2">頂欄導(dǎo)航二</el-menu-item>
      <el-menu-item index="3">頂欄導(dǎo)航三</el-menu-item>
    </el-menu>
    <div class="line"></div>
  </el-col>

  <el-col :span="10">
    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

      <el-submenu index="1" v-show="currentTopMenu == 1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>側(cè)欄導(dǎo)航一</span>
        </template>


        <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>


      </el-submenu>
      <el-menu-item index="2" v-show="currentTopMenu == 2">
        <i class="el-icon-menu"></i>
        <span slot="title">側(cè)欄導(dǎo)航二</span>
      </el-menu-item>
      <el-menu-item index="3" v-show="currentTopMenu == 3">
        <i class="el-icon-setting"></i>
        <span slot="title">側(cè)欄導(dǎo)航三</span>
      </el-menu-item>
    </el-menu>
  </el-col>

</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      currentTopMenu: '1'
    }
  },
  methods: {
    handleSelect(index) {
      this.currentTopMenu = index;
    }
  }
})
2018年5月28日 11:19