Vue<自定义折叠菜单栏>

效果图：

nav.gif

此篇文章主要方便小白们理解折叠菜单栏的原理，实现的方法也是有多种的，此处涉及一种方式，具体样式的实现可自己定义~~~ 👍
效果图为手风琴折叠样式，代码中有一部分可以注释掉，然后就能实现多菜单展开效果了

image.png

代码如下：

<template>
  <div class="rightNav">
    <ul class="tab-nav">
      <li v-for="(i,index) in navList" :key="index">
        <div class="nav" @click="openNav(index,i.list.length)">
          <i class="el-icon-s-home"></i>
          <span>{{i.title}}</span>
          <i v-if="i.list.length" id="right-btn" class="el-icon-arrow-right"></i>
        </div>
        <div class="nav-n-box">
          <div class="nav-n" v-for="(n,index) in i.list" :key="index">{{n.title}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          title: "首页",
          name: "home",
          list: []
        },
        {
          title: "业务介绍",
          name: "BusinessIntroduction",
          list: [
            {
              title: "交易规则",
              name: "BusinessIntroduction"
            },
            {
              title: "政策法规",
              name: "BusinessIntroduction"
            }
          ]
        },
        {
          title: "新闻资讯",
          name: "News",
          list: [
            {
              title: "公告通知",
              name: "BusinessIntroduction"
            },
            {
              title: "公司新闻",
              name: "BusinessIntroduction"
            },
            {
              title: "行业资讯",
              name: "BusinessIntroduction"
            }
          ]
        },
        {
          title: "关于我们",
          name: "AboutUs",
          list: [
            {
              title: "中心介绍",
              name: "BusinessIntroduction"
            },
            {
              title: "法律申明",
              name: "BusinessIntroduction"
            },
            {
              title: "常见问题",
              name: "BusinessIntroduction"
            }
          ]
        }
      ]
    };
  },
  methods: {
    openNav(index, num) {
      let _this = this;
      let nav = document.querySelectorAll(".nav"); //获取父级菜单栏，以便添加选中样式
      let items = document.querySelectorAll(".nav-n-box"); //获取容纳子级菜单栏的容器，以便动态设置高度，实现下拉效果

      //-----------------可注释部分开始------注释后则不是手风琴效果------------------
      // 遍历菜单栏，移除所有选中后的样式   添加此段可实现手风琴效果，注释则实现多展示效果
      for (let i = 0; i < nav.length; i++) {
        // nav[index].classList.contains("nav-n-box-active") 判断标签内是否含有该class属性，以布尔值类型返回
        if (
          items[i].style.height == "" ||
          items[i].style.height == "0rem" ||
          nav[index].classList.contains("nav-n-box-active")
        ) {
          let height = items[index].style.height;
          items[index].style.height = height;
        } else {
          items[i].style.height = "0rem";
        }
        nav[i].classList.remove("nav-n-box-active");
      }
      //-----------------可注释部分结束------------------------


      //根据子菜单栏的高度判断，是否展开菜单栏，若有进行遍历操作，那么每次点击某个菜单栏的时候 height 都为 0
      if (
        items[index].style.height == "" ||
        items[index].style.height == "0rem"
      ) {
        //num 为子菜单栏的个数，根据子菜单栏确定容器的高度
        items[index].style.height = num * 2 + "rem";
        //添加右箭头旋转样式
        nav[index].classList.add("nav-n-box-active");
      } else {
        items[index].style.height = "0rem";
        //移除右箭头旋转样式
        nav[index].classList.remove("nav-n-box-active");
      }
      //------------------------------------------
    }
  }
};
</script>

<style lang="scss" scoped>
.rightNav {
  position: fixed;
  width: 65%;
  height: 100%;
  top: 20%;
  left: 20%;
  background: white;
  z-index: 100;
  max-width: 200px;
  .tab-nav {
    padding: 1rem;
    list-style: none;
    li {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      cursor: pointer;
      user-select: none;
      .nav {
        padding: 1rem 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        i {
          transition: 0.3s;
          color: rgb(0, 225, 255);
        }
        span {
          display: inline-block;
          width: 100%;
          text-align: left;
          color: #808080;
          font-size: 0.88rem;
          margin-left: 1rem;
        }
      }
      .nav-n-box {
        transition: 0.3s;
        width: 100%;
        height: 0;
        overflow: hidden;
        .nav-n {
          width: 100%;
          font-size: 0.88rem;
          color: #808080;
          height: 2rem;
          text-align: left;
          padding-left: 2rem;
          line-height: 2rem;
          transition: 0.3s;
          &:hover {
            background: rgb(0, 225, 255);
            color: white;
            opacity: 0.5;
          }
        }
      }
    }
  }
}
//点击后右箭头的反转效果
.nav-n-box-active {
  #right-btn {
    transform: rotate(90deg) !important;
  }
}
</style>