本文例項為大家分享了實現三級導航展示和隱藏的具體程式碼，供大家參考，具體內容如下

需求描述：

要實現側邊欄三級導航的顯示和隱藏。點選其中一個一級導航，展示該一級導航的二級導航，再點選關閉該二級導航。一級導航的其他項，展開二級導航。關閉其他一級導航的二級導航。

效果如下：

程式碼：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue. App" />
    <div class="first" v-for="(item,key) in navLists" :key="key">
      <li>
      http://www.cppcns.com
 
  <span @click="handleClick(key)"> {{ item.title }}</span>
        <div
          v-for="(item2,key2) in item.child"
          :key="key2"
          class="second"
          v-show="show2 && currIndex == key"
        >
          <p @click="secondClick(key2)">{{ item2.subTitle }}</p>
          <div
            v-for="(item3,key3) in itwww.cppcns.com
 
em2.threeChild"
            :key="key3"
            class="three"
           v-show="show3 && currIndex2 == key2"
          >
            {{ item3.threeTitle }}
          </div>
        </div>
      </li>
    </div>
  </div>
</template>
 
<script>
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
  name: "App",components: {
    HelloWorld,},data() {
    return {
      i: 0,show3: false,show2: false,navLists: [
        {
          title: "專案資訊",child: [
            {
              subTitle: "專案簡介",esubTitle: "#projectIntroduction",threeChild: [
                { threeTitle: "三級導航" },{ threeTitle: "三級導航" },],{
              subTitle: "樣品資訊",threeChild: [
                { threeTitle: "三級導航22" },{ threeTitle: "三級導航22" },threeChild: [
                { threeTitle: "三級導航33" },{ threeTitle: "三級導航33" },{
          title: "專案資訊2",child: [
            {
              subTitle: "專案簡介22",threeChild: [
                { threeTitle: "三級導航44" },{ threeTitle: "三級導44" },{
              subTitle: www.cppcns.com
 
"樣品資訊22",{
          title: "專案資訊3",eTitle: "#projectMessage",child: [
            {
              subTitle: "專案簡介33",{
              subTitle: "樣品資訊33",esubTitle: "#sampleInformation",{
              subTitle: "樣品資訊22",currIndex: "",//當前索引
      spanIndex: [],//索引陣列
      arrIndex: "",//用於判斷是否做索引陣列找到當前索引。-1為找不到,0找到了。
 
      currIndex2: "",//二級導航當前索引
      spanIndex2: [],//索引陣列
      arrIndex2: "",0找到了。
    };
  },methods: {
    handleClick(index) {
      // 初始化三級導航，預設不顯示。
      this.show3 =false;
      this.spanIndex2.splice(-1,1);
 
      // 當前索引=index
      this.currIndex = index;
      console.log("當前索引index",index);
      // 判斷當前索引是否在索引陣列spanIndex中。arrIndex的值只有兩種結果，-1未找到。0找到了。
    www.cppcns.com  this.arrIndex = this.spanIndex.indexOf(index);
      console.log("arrIndex",this.arrIndex);
 
      if (this.arrIndex == 0) {
        //arrIndex ==0，找到索引了，在索引陣列spanIndex刪除該索引,隱藏二級導航。
        this.spanIndex.splice(this.arrIndex,1);
        this.show2 = false;
      } else {
        // arrIndex ==-1,沒有找到，splice(-1,1)從spanIndex陣列結尾處刪除1個值，並將當前索引新增到索引陣列spanIndex，show2為true，展示二級導航，
        this.spanIndex.splice(this.arrIndex,1);
        this.spanIndex.push(index);
        this.show2 = true;
      }
      
      console.log("索引陣列",this.spanIndex);
    },secondClick(index) {
      console.log(index);
      // 當前索引=index
      this.currIndex2 = index;
      // 判斷當前索引是否在索引陣列spanIndex中。arrIndex的值只有兩種結果，-1未找到。0找到了。
      this.arrIndex2 = this.spanIndex2.indexOf(index);
      console.log("arrIndex2",this.arrIndex2);
 
      if (this.arrIndex2 == 0) {
        //arrIndex ==0，找到索引了，在索引陣列spanIndex刪除該索引,隱藏二級導航。
        this.spanIndex2.splice(this.arrIndex2,1);
        this.show3 = false;
      } else {
        // arrIndex ==-1,1)從spanIndex陣列結尾處刪除1個值，並將當前索引新增到索引陣列spanIndex，show2為true，展示二級導航，
        this.spanIndex2.splice(this.arrIndex2,1);
        this.spanIndex2.push(index);
        this.show3 = true;
      }
       console.log("索引陣列2",this.spanIndex2);
    },};
</script>
 
<style>
p {
  padding: 5px 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
#app {
  font-family: Avenir,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.first {
  width: 200px;
  font-size: 24px;
  font-weight: bold;
  /* height: 60px; */
  /* background:red; */
}
.first:hover {
  cursor: pointer;
 
  /* color:red; */
}
.second {
  font-size: 18px;
  font-weight: normal;
  background: #eee;
  margin-left: 50px;
}
.three {
  background: yellow;
  margin-left: 20px;
  font-size: 14px;
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。