专栏首页搞前端的李蚊子vue实现侧边栏手风琴效果

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

相关文章

  • 微信小程序实现滚动加载更多

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的...

    李文杨
  • 活动可视化搭建系统——你的KPI被我承包了

    对于C端业务偏多的公司来说,在增长、运营等各方同学的摧残下永远绕不过去的一个坑就是大量的H5页面开发,它可能是一个下载、需求告知、产品介绍、营销活动等页面。此类...

    李文杨
  • 使用canvas实现一个圆球的触壁反弹

    HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF00...

    李文杨
  • 千秋万代,一统江湖——Flutter for All Screens

    2018年2月27日,Google发布了Flutter的第一个Beta版本,由于自己是一个Google粉,所以很快就下载尝鲜了,之后还在简书上发过一篇博客《你好...

    出其东门
  • Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信

    前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信。

    AndroidTraveler
  • VUE 入门基础(6)

    六,条件渲染   v-if 添加一个条件块     <h1 v-if=“ok”>Yes</h1>   也可以用v-else 添加else 块   <templa...

    用户1197315
  • 创建 Vitis 加速平台第 1 部分:在 Vivado 中为加速平台创建硬件工程

    在本文中,我们将讲解如何在 Vivado® Design Suite 中完成平台准备工作,以便将其用作为 Vitis™ 中的加速平台。

    碎碎思
  • Docker三大核心概念之容器

    使用docker create命令新建的容器处于停止状态。可以使用docker start命令启动它。

    分母为零
  • docker容器基本操作

    若与
  • docker︱在nvidia-docker中使用tensorflow-gpu/jupyter

    docker小白… 搭建基础:宿主机已经有CUDA8.0 一、安装 参考:Docker Compose + GPU + TensorFlow = ❤ ...

    素质

扫码关注云+社区

领取腾讯云代金券