Vue-折疊菜單（可設置手風琴效果）

<!--
 * @Description: nav側邊欄
 * @Version: 1.0
 * @Autor: Nanke_南柯
 * @Date: 2020-09-03 17:22:19
 * @LastEditors: Nanke_南柯
 * @LastEditTime: 2020-09-19 15:55:27
-->
<template>
    <div class="Top20_ProblemAnalysis">
        <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>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    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',
                        },
                    ],
                },
            ],
        };
    },
    watch: {},
    computed: {},
    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++) {
                if (
                    items[i].style.height == '' ||
                    items[i].style.height == '0rem' ||
                    nav[index].classList.contains('nav-n-box-active') //判斷標簽內是否含有該class屬性，以布爾值類型返回
                ) {
                    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');
            }
            //------------------------------------------
        },
    },
    created() {},
    mounted() {},
};
</script>
<style lang="scss" scoped>
.Top20_ProblemAnalysis {
    width: 100%;
    height: calc(100vh - 160px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    .rightNav {
        width: 65%;
        height: 500px;
        background: white;
        max-width: 200px;
        margin-top: 20px;

        .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>