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;
            }
        }
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ml

朴素贝叶斯分类器(离散型)算法实现(一)

1. 贝叶斯定理:        (1)   P(A^B) = P(A|B)P(B) = P(B|A)P(A)   由(1)得    P(A|B) = P(B|...

3467
来自专栏聊聊技术

原 初学图论-Kahn拓扑排序算法(Kah

2888
来自专栏xingoo, 一个梦想做发明家的程序员

Spark踩坑——java.lang.AbstractMethodError

百度了一下说是版本不一致导致的。于是重新检查各个jar包,发现spark-sql-kafka的版本是2.2,而spark的版本是2.3,修改spark-sql-...

1210
来自专栏开发与安全

算法:AOV网(Activity on Vextex Network)与拓扑排序

在一个表示工程的有向图中,用顶点表示活动,用弧表示活动之间的优先关系,这样的有向图为顶点表示活动的网,我们称之为AOV网(Activity on Vextex ...

2607
来自专栏计算机视觉与深度学习基础

Leetcode 114 Flatten Binary Tree to Linked List

Given a binary tree, flatten it to a linked list in-place. For example, Given...

1958
来自专栏desperate633

LeetCode Invert Binary Tree题目分析

Invert a binary tree. 4 / \ 2 7 / \ / \1 3 6 9 to4 / \ 7 2 / \ / \9 6 3 1 Tri...

871
来自专栏Phoenix的Android之旅

Java 集合 Vector

List有三种实现,ArrayList, LinkedList, Vector, 它们的区别在于, ArrayList是非线程安全的, Vector则是线程安全...

672
来自专栏赵俊的Java专栏

从源码上分析 ArrayList

1181
来自专栏xingoo, 一个梦想做发明家的程序员

AOE关键路径

这个算法来求关键路径,其实就是利用拓扑排序,首先求出,每个节点最晚开始时间,再倒退求每个最早开始的时间。 从而算出活动最早开始的时间和最晚开始的时间,如果这两个...

2527
来自专栏xingoo, 一个梦想做发明家的程序员

20120918-向量实现《数据结构与算法分析》

#include <iostream> #include <list> #include <string> #include <vector> #include...

1736

扫码关注云+社区