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 条评论
登录 后参与评论

相关文章

来自专栏天天P图攻城狮

Android图像处理 - 高斯模糊的原理及实现

本文首先介绍图像处理中最基本的概念:卷积;随后介绍高斯模糊的核心内容:高斯滤波器;接着,我们从头实现了一个Java版本的高斯模糊算法,以及实现RenderScr...

1.6K10
来自专栏数值分析与有限元编程

列主元消去法解方程组

高斯消去法解方程组较为简单,然而如果在消去过程中出现0主元或者是主元非常小的话,消去法将失败或者数值不稳定。这时可以采用选主元的方法,进行处理。下面给出列主元消...

3799
来自专栏落影的专栏

Metal图像处理——直方图均衡化

首先,我们用直方图来表示一张图像:横坐标代表的是颜色值,纵坐标代表的是该颜色值在图像中出现次数。

3383
来自专栏Python

随机验证码

Python生成随机验证码,需要使用PIL模块.python3则是pillow 安装: ? 1 pip3 install pillow ...

3026
来自专栏Small Code

使用MATLAB的fitlm函数进行线性回归

今天在做《数理统计》关于线性回归的作业,本来用R已经做出来了,但是由于最近使用matlab很多,所以也想看看用matlab怎么做。 matlab中有很多函数可以...

3996
来自专栏数据处理

图片RGB三维矩阵的表示

7271
来自专栏数据小魔方

think-cell chart系列12——气泡图

今天要跟大家分享的是气泡图! 因为think-cell chart中气泡图与散点图的数据组织结构非常相似(几乎就是一样的,气泡图要比散点图多一列size数据(散...

4846
来自专栏邹成卓的专栏

三维变换矩阵的理解

3D空间中的一个点的坐标,可以用(x,y,z)来表示。对这个点的坐标变换有三种操作:缩放、平移、旋转。

1.4K2
来自专栏ATYUN订阅号

智能主题检测与无监督机器学习:识别颜色教程

介绍 人工智能学习通常由两种主要方法组成:监督学习和无监督的学习。监督学习包括使用现有的训练集,这种训练集由预先标记的分类数据列组成。机器学习算法会发现数据的...

4984
来自专栏生信小驿站

R 相关性分析

2204

扫码关注云+社区