vue實現側邊欄手風琴效果

李文楊發表於2017-09-29
Vue

 模板

程式碼如下

html

<template>
    <div class="header">
        <ul>
            <!-- 迴圈資料在點選呼叫changeli方法時將當前索引和本條資料傳進去,並使用當前資料show的bool值新增或移除樣式 -->
            <li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData">
                <!-- 在這裡列印出boll值方便檢視 -->
                {{item.name}}{{item.show}}
                <!-- 判斷當前這條資料的bool值如果是true就開啟二級選單,如果是false就關閉二級選單 -->
                    <ul v-show="item.show"> 
                        <!-- 迴圈二級選單資料並使用.stop阻止冒泡 -->
                        <li v-for="(a,index) in item.list" v-on:click.stop="doThis(index)">{{a}}</li>
                    </ul>
              
            </li>
        </ul>
    </div>
</template>

js

 export default {
        data() {
            return {
                headerData: [{
                    name: '導航1',
                    list: ['子集', '子集', '子集', '子集', '子集'],
                    show: false
                }, {
                    name: '導航2',
                    list: ['子集', '子集', '子集', '子集', '子集'],
                    show: false
                }, {
                    name: '導航3',
                    list: ['子集', '子集', '子集', '子集', '子集'],
                    show: false
                }, {
                    name: '導航4',
                    list: ['子集', '子集', '子集', '子集', '子集'],
                    show: false
                }, {
                    name: '導航5',
                    list: ['子集', '子集', '子集', '子集', '子集'],
                    show: false
                }]
            }
        },
        methods: {
            changeli: function(ind, item) {
                // 先迴圈資料中的show將其全部置為false,此時模板裡的v-if判斷生效關閉全部二級選單,並移除樣式
                this.headerData.forEach(i => {
                    // 判斷如果資料中的headerData[i]的show屬性不等於當前資料的show屬性那麼headerData[i]等於false
                    if (i.show !== this.headerData[ind].show) {
                        i.show = false;
                    };
                });
                // 取反(true或false)
                item.show = !item.show;
                console.log(item.name)
            },
            doThis: function(index) {
                alert(index)
            }
        }
    }

css

 .header {
        width: 20%;
        background-color: #ff5722;
        color: #ffffff;
        >ul {
            width: 100%;
            @include clearfix;
            >li {
                width: 100%;
                border: 1px solid #ffffff;
                cursor: pointer; // float: left;
                color: 20px;
                text-align: center;
                line-height: 60px;
                &:hover {
                    background-color: #ff9800;
                }
                >ul {
                    width: 100%;
                    background: red;
                    li{
                        &:hover{
                            background: #c31111;
                        }
                    }
                }
            }
            .active {
                background-color: #ff9800;
            }
        }
    }

 

相關文章