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

相关文章

来自专栏算法channel

机器学习储备(9):matplotlib绘图原理及实例

? matplotlib绘图的基本元素都包括都哪些?常用的绘图API如何应用。本文做个入门介绍吧。 1 基本元素 通过一个大部分都是用默认值的例子,初步认识下...

3208
来自专栏腾讯社交用户体验设计

打造高大上的Canvas粒子动画

1143
来自专栏专知

【干货】计算机视觉实战系列01——用Python做图像处理

【导读】在当今互联网飞速发展的社会中,数量庞大的图像和视频充斥着我们的生活,让我们需要对图片进行检索、分类等操作时,利用人工手段显然是不现实的,于是,计算机视觉...

50312
来自专栏Unity Shader

Shader初学笔记:vertex/fragment渲染过程

#pragma vertex vert //对应下面的vert函数,得到转换坐标系后的顶点信息

5894
来自专栏偏前端工程师的驿站

CSS3魔法堂:背景渐变(Gradient)

一、前言                               很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认...

26510
来自专栏计算机视觉及音视频工程

YVU格式Y分量存储为灰度

 Image为Android 5.0以上提供的类,用于保存YUV420格式的集合。

2266
来自专栏数据小魔方

频率统计函数——FREQUENCY

今天跟大家分享一个频率统计函数——FREQUENCY函数! ▽▼▽ 在统计一组数据各数量段频数的时候,如果能够善用频率函数,工作效率将会大大提高,当然频率统计也...

2735
来自专栏python3

python简单脚本之概率计算

521
来自专栏郭艺帆的专栏

庖丁解牛:GIF

GIF 是一种使用 LZW 压缩,支持多张图像的容器。支持256色,透明通道为1bit。作为互联网表情包的载体,GIF 这项80年代的技术依然生生不息。

1660
来自专栏人工智能LeadAI

数据分析中的可视化-常见图形

import matplotlib.pyplot as plt import pandas as pd from pandas import Series, D...

982

扫描关注云+社区