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]等于falseif (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;}}}
转载于:https://www.cnblogs.com/Smiled/p/7610905.html
vue实现侧边栏手风琴效果相关推荐
- vue怎么实现手风琴效果_Vue动画实现简易手风琴组件
1.需求描述 最近做Vue项目有个需求,用手风琴效果实现对企业信息的展示,具体是在鼠标移入时,图片拉伸放大,其中包含标题及简述的浮现,流畅度要高.经过一番思考研究终于完成了,下面上代码. 2.代码部分 ...
- vue怎么实现手风琴效果_Vue中使用v-for制作动态手风琴效果
export default { data () { return { Faq: [ { isSubShow: false, about: 'Q:非公司员工是否可通过次入口申请公司客房?', answ ...
- vue 手风琴效果_Vue实现侧边菜单栏手风琴效果实例代码
编程之家收集整理的这篇文章主要介绍了Vue实现侧边菜单栏手风琴效果实例代码,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 效果图如下所示: {{item.name}} { // 判断如 ...
- vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开 效果展示 手风琴效果 版本说明 "vue": "^2.6.11", " ...
- element-ui手风琴自定义html,element-ui中el-table expand 手风琴效果,展开里面的内容或者ta...
element-ui中el-table expand 手风琴效果,展开里面的内容或者ta element-ui中el-table expand 手风琴效果,展开里面的内容或者table,展开下一个,上 ...
- 【推拉框-手风琴】vue3实现手风琴效果的组件
简言 在工作时有时会用到竖形手风琴效果的组件. 在此记录下实现代码和实现思路. 手风琴实现 结构搭建 搭建结构主要实现盒子间的排列效果. 用flex布局或者其他布局方式将内容在一行排列 把每一项的内容 ...
- 解决css内容高度不固定,transition手风琴效果失效的情况(展开收起)
最近写了一个筛选功能,要使用手风琴效果展开内容,但是高度不固定,故此添加的动画效果失效,对此有两种解决方案 动画失效的原理是: 如果当前设置动画的元素他的父元素高度为auto的时候,且当前元素未设置p ...
- VUE手动实现手风琴折叠面板,不用组件
Table of Contents 1.在需要点击触发事件的位置加上click事件 2.在点击区域内合适的地方加上图标 3.实现foldSwitch方法 4.实现changeStyle方法 VUE+e ...
- 第62天:手风琴效果
手风琴效果: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset= ...
- 使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果 本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
最新文章
- 5G 标准 — R16
- python中将函数赋值给变量时需要注意的一些问题
- error LNK2019: unresolved external symbol __imp__ func@20 referenced in function..
- 想写Python爬虫?看这5个教程就行了!
- C++入门指南及实战 第三步 基本变量
- iOS 高效 Mac 配置
- 一线城市BAT名企软件测试职位解析,有什么样的技术要求?
- C++ string split()和 replaceAll()
- matlab中的对数log()使用
- mysql 归档_MySQL数据归档的几种操作方法介绍
- python车牌识别(包括SVM原理)
- 开源私有云盘python_搭建Windows版Seafile开源私有云盘
- 风控数据来源及分析技巧
- Mini CFA 考试练习题 Economics of International Trade
- 单调队列优化的DP问题
- PHPMyWind支持ppt一键导入
- iOS 设备的屏幕尺寸
- fat文件系统基础知识
- nvm环境安装和 node 的基本使用
- 【厚积薄发系列】C++项目总结19—组件化架构思想