Vue-折叠菜单（可设置手风琴效果）

  1 <!--
  2  * @Description: nav侧边栏
  3  * @Version: 1.0
  4  * @Autor: Nanke_南柯
  5  * @Date: 2020-09-03 17:22:19
  6  * @LastEditors: Nanke_南柯
  7  * @LastEditTime: 2020-09-19 15:55:27
  8 -->
  9 <template>
 10     <div class="Top20_ProblemAnalysis">
 11         <div class="rightNav">
 12             <ul class="tab-nav">
 13                 <li v-for="(i, index) in navList" :key="index">
 14                     <div class="nav" @click="openNav(index, i.list.length)">
 15                         <i class="el-icon-s-home"></i>
 16                         <span>{{ i.title }}</span>
 17                         <i v-if="i.list.length" id="right-btn" class="el-icon-arrow-right"></i>
 18                     </div>
 19                     <div class="nav-n-box">
 20                         <div class="nav-n" v-for="(n, index) in i.list" :key="index">{{ n.title }}</div>
 21                     </div>
 22                 </li>
 23             </ul>
 24         </div>
 25     </div>
 26 </template>
 27 
 28 <script>
 29 export default {
 30     components: {},
 31     props: {},
 32     data() {
 33         return {
 34             navList: [
 35                 {
 36                     title: '首页',
 37                     name: 'home',
 38                     list: [],
 39                 },
 40                 {
 41                     title: '业务介绍',
 42                     name: 'BusinessIntroduction',
 43                     list: [
 44                         {
 45                             title: '交易规则',
 46                             name: 'BusinessIntroduction',
 47                         },
 48                         {
 49                             title: '政策法规',
 50                             name: 'BusinessIntroduction',
 51                         },
 52                     ],
 53                 },
 54                 {
 55                     title: '新闻资讯',
 56                     name: 'News',
 57                     list: [
 58                         {
 59                             title: '公告通知',
 60                             name: 'BusinessIntroduction',
 61                         },
 62                         {
 63                             title: '公司新闻',
 64                             name: 'BusinessIntroduction',
 65                         },
 66                         {
 67                             title: '行业资讯',
 68                             name: 'BusinessIntroduction',
 69                         },
 70                     ],
 71                 },
 72                 {
 73                     title: '关于我们',
 74                     name: 'AboutUs',
 75                     list: [
 76                         {
 77                             title: '中心介绍',
 78                             name: 'BusinessIntroduction',
 79                         },
 80                         {
 81                             title: '法律申明',
 82                             name: 'BusinessIntroduction',
 83                         },
 84                         {
 85                             title: '常见问题',
 86                             name: 'BusinessIntroduction',
 87                         },
 88                     ],
 89                 },
 90             ],
 91         };
 92     },
 93     watch: {},
 94     computed: {},
 95     methods: {
 96         openNav(index, num) {
 97             let _this = this;
 98             let nav = document.querySelectorAll('.nav'); //获取父级菜单栏，以便添加选中样式
 99             let items = document.querySelectorAll('.nav-n-box'); //获取容纳子级菜单栏的容器，以便动态设置高度，实现下拉效果
100 
101             //-----------------可注释部分开始------注释后则不是手风琴效果------------------
102             // 遍历菜单栏，移除所有选中后的样式   添加此段可实现手风琴效果，注释则实现多展示效果
103             for (let i = 0; i < nav.length; i++) {
104                 if (
105                     items[i].style.height == '' ||
106                     items[i].style.height == '0rem' ||
107                     nav[index].classList.contains('nav-n-box-active') //判断标签内是否含有该class属性，以布尔值类型返回
108                 ) {
109                     let height = items[index].style.height;
110                     items[index].style.height = height;
111                 } else {
112                     items[i].style.height = '0rem';
113                 }
114                 nav[i].classList.remove('nav-n-box-active');
115             }
116             //-----------------可注释部分结束------------------------
117 
118             //根据子菜单栏的高度判断，是否展开菜单栏，若有进行遍历操作，那么每次点击某个菜单栏的时候 height 都为 0
119             if (items[index].style.height == '' || items[index].style.height == '0rem') {
120                 //num 为子菜单栏的个数，根据子菜单栏确定容器的高度
121                 items[index].style.height = num * 2 + 'rem';
122                 //添加右箭头旋转样式
123                 nav[index].classList.add('nav-n-box-active');
124             } else {
125                 items[index].style.height = '0rem';
126                 //移除右箭头旋转样式
127                 nav[index].classList.remove('nav-n-box-active');
128             }
129             //------------------------------------------
130         },
131     },
132     created() {},
133     mounted() {},
134 };
135 </script>
136 <style lang="scss" scoped>
137 .Top20_ProblemAnalysis {
138     width: 100%;
139     height: calc(100vh - 160px);
140     position: relative;
141     display: flex;
142     justify-content: center;
143     align-items: center;
144     color: #fff;
145     .rightNav {
146         width: 65%;
147         height: 500px;
148         background: white;
149         max-width: 200px;
150         margin-top: 20px;
151 
152         .tab-nav {
153             padding: 1rem;
154             list-style: none;
155 
156             li {
157                 display: flex;
158                 align-items: center;
159                 flex-wrap: wrap;
160                 cursor: pointer;
161                 user-select: none;
162 
163                 .nav {
164                     padding: 1rem 0;
165                     width: 100%;
166                     display: flex;
167                     align-items: center;
168                     justify-content: space-between;
169 
170                     i {
171                         transition: 0.3s;
172                         color: rgb(0, 225, 255);
173                     }
174 
175                     span {
176                         display: inline-block;
177                         width: 100%;
178                         text-align: left;
179                         color: #808080;
180                         font-size: 0.88rem;
181                         margin-left: 1rem;
182                     }
183                 }
184 
185                 .nav-n-box {
186                     transition: 0.3s;
187                     width: 100%;
188                     height: 0;
189                     overflow: hidden;
190 
191                     .nav-n {
192                         width: 100%;
193                         font-size: 0.88rem;
194                         color: #808080;
195                         height: 2rem;
196                         text-align: left;
197                         padding-left: 2rem;
198                         line-height: 2rem;
199                         transition: 0.3s;
200 
201                         &:hover {
202                             background: rgb(0, 225, 255);
203                             color: white;
204                             opacity: 0.5;
205                         }
206                     }
207                 }
208             }
209         }
210     }
211 
212     //点击后右箭头的反转效果
213     .nav-n-box-active {
214         #right-btn {
215             transform: rotate(90deg) !important;
216         }
217     }
218 }
219 </style>