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;
}
}
}
- 深入理解final关键字
- Numpy 修炼之道 (4)—— 基本运算操作
- 一些APT攻击案例分享
- 浅谈命令查询职责分离(CQRS)模式
- Numpy 修炼之道 (3)—— 数据类型
- 熔断器设计模式
- 树链剖分详解
- 洛谷P3379 【模板】最近公共祖先(LCA)(树链剖分)
- 学习使用Jieba1.Jieba2. 特点3.功能4.安装5.使用6.其他中文分词工具
- 如何使用sklearn加载和下载机器学习数据集
- 洛谷P3224 [HNOI2012]永无乡
- 手把手教你使用sklearn快速入门机器学习
- 【 关关的刷题日记48】Leetcode 58. Length of Last Word
- RESTful API 设计指南
- 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 数组属性和方法
- React登录跳转遇到的问题
- 响应式架构与 RxJava 在有赞零售的实践
- Centos 7搭建Gitlab服务器超详细Centos 7搭建Gitlab服务器超详细(搭建成功)
- Netty之旅二:口口相传的高性能Netty到底是什么?
- 前端知识复习(一)
- Powershell运行脚本报错:此系统上禁止运行脚本
- git rebase解决合并冲突
- npm相关操作
- Angular html property的值如何被更新的
- Centos 7 使用mailx发送邮件
- Centos 7 备份MySQL
- Centos 7 备份MySQL/MongoDB并发邮件脚本
- Nginx启动报错:sbin/nginx: error while loading shared libraries: libpcre.so.1: cannot open shared object
- 有赞美业店铺装修前端解决方案
- nginx部署react项目