vue实现侧边栏手风琴效果
时间:2022-05-04
本文章向大家介绍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;
}
}
}
- 【android开发】Android binder学习一:主要概念
- 高考啦! JavaScript高考全国卷
- 2017 JavaScript高考全国卷 参考答案与解析
- 用贝叶斯判别分析方法预测股票涨跌
- 开发 | 在 Mac OS X 装不上 TensorFlow?看了这篇就会装
- 【答疑解惑】Java中的默认构造器和equals方法
- 原生JS | 当兔子遇到鸡
- 【Android基础】Activity的生命周期函数
- 七种常用回归技术,如何正确选择回归模型?
- 爬取拉勾网大数据相关岗位薪资信息存到excel,并作数据分析
- 【Windows编程】系列第五篇:GDI图形绘制
- 抓取链家官网北京房产信息并用python进行数据挖掘
- 用R语言做钻石价格预测
- 2分钟完成30*15页拉勾网职位需求关键词的抓取
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android如何通过命令行操作Sqlite3数据库的方法
- Android实现沉浸式状态栏功能
- PHP对验证码的认证过程
- Android实现图片加载进度提示
- android shape实现阴影或模糊边效果
- Spring Data JPA主键采用UUID策略
- Android自定义控件之水平圆点加载进度条
- Android屏幕旋转之横屏竖屏切换的实现
- Android Studio连接SQLite数据库的登录注册实现
- Android 获取 usb 权限的两种方法
- Android实现两圆点之间来回移动加载进度
- Android使用第三方库实现日期选择器
- Android Activity向右滑动返回
- 大多数人都不懂的搜索引擎技巧,掌握这几点,提升你的工作效率
- 如何使用Flutter实现58同城中的加载动画详解