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

相关文章

来自专栏人工智能LeadAI

解析Tensorflow官方PTB模型的demo

01 seq2seq代码案例解读 RNN 模型作为一个可以学习时间序列的模型被认为是深度学习中比较重要的一类模型。在Tensorflow的官方教程中,有两个与...

4318
来自专栏云计算教程系列

如何使用Scikit-learn在Python中构建机器学习分类器

机器学习是计算机科学、人工智能和统计学的研究领域。机器学习的重点是训练算法以学习模式并根据数据进行预测。机器学习特别有价值,因为它让我们可以使用计算机来自动化决...

1445
来自专栏机器学习原理

深度学习——CNN(4)分析

1684
来自专栏PaddlePaddle

【RNN】使用RNN语言模型生成文本

导语 PaddlePaddle提供了丰富的运算单元,帮助大家以模块化的方式构建起千变万化的深度学习模型来解决不同的应用问题。这里,我们针对常见的机器学习任务,提...

4105
来自专栏Small Code

【TensorFlow】TensorFlow 的卷积神经网络 CNN - TensorBoard版

前面 写了一篇用 TensorFlow 实现 CNN 的文章,没有实现 TensorBoard,这篇来加上 TensorBoard 的实现,代码可以从 这里 下...

3116
来自专栏ACM算法日常

第五篇:《机器学习之逻辑回归(下)》

https://pan.baidu.com/s/1tnMHvLWB_qXyuoPiBgnhaQ

663
来自专栏用户2442861的专栏

Caffe学习系列(6):Blob,Layer and Net以及对应配置文件的编写

http://www.cnblogs.com/denny402/p/5073427.html

421
来自专栏云时之间

深度学习与神经网络:基于自建手写字体数据集上的模型测试

在上一篇文章中,我们使用mnist数据集去做了一个识别的小型神经网络,在今天的这篇文章里,我们将要通过使用自建数据集去检验上一篇文章的模型,从而真正的可以去应用...

4497
来自专栏运维

求两数的平均值

某文件中,有如下多行数据 ,需要统计含关键字:real 对应行的数值(第二列),并最后得出总平均值 请给出相关命令 或 实现思路? 样本数据如下: Real  ...

71
来自专栏有趣的Python

16- 深度学习之神经网络核心原理与算法-caffe&keras框架图片分类

1864

扫码关注云+社区