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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://dhexx.cn/news/show-18314.html

如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网进行投诉反馈,一经查实,立即删除!


相关文章:

  • js获取元素,窗口的宽度、高度
  • cCupcake---ToFu
  • 在Linux上显示某个进程的线程的几种方式
  • Yii2 upload
  • HDU 2014 - 青年歌手大奖赛_评委会打分
  • Cent OS 下 VI 使用方法
  • 10.5~10.6复习与预习的进行
  • 神奇DP [HNOI2004] 打砖块
  • junit搭配hamcrest使用
  • weblogic查看版本号教程
  • shell脚本需求
  • lightoj 1382 - The Queue(树形dp)
  • 利用GDAL进行工具开源化改造
  • Git相关操作一
  • Centos干净卸载apache-php-mysql
  • jquery获取json对象中的key小技巧
  • 经典算法-(一)汉诺塔(河内之塔)
  • 第二次课动手动脑的问题以及课后实验性的问题
  • sublime3 配置go的开发环境
  • jquery各种事件使用方法总结(from:天宇之游)
  • Web API 2 入门——使用Web API与ASP.NET Web窗体(谷歌翻译)
  • 最小费用最大流板子
  • bzoj2339: [HNOI2011]卡农
  • 【BZOJ3379】[Usaco2004 Open]Turning in Homework 交作业 DP
  • MySQL--Centos7下安装5.7.19
  • nodepad代码格式复制到word发布到博客
  • 用SQL语言操作数据
  • 一个很可爱的二次元风格的个人技术博客
  • 接口测试基础——第6篇unittest模块(三)
  • 数据库操作之——约束
  • 驱动程序的同步处理
  • Codeforces Round #442 (Div. 2) D. Olya and Energy Drinks
  • ppt制作元素采集
  • Gradle Maven部署,转化
  • 在学java继承中
  • [争什么! 掺在一起做撒尿牛丸啊! 笨蛋]ASP.NET Core 2.0 + EF6 + Linux +MySql混搭
  • 实现LNMP
  • OSX 鼠标和键盘事件
  • vue2项目使用axios发送请求
  • eclipse 安装maven
  • python之路_数据备份及pymysql模块
  • [软件工程基础]2017.10.30 第三次 Scrum 会议
  • 2017iOS开发最新的打包测试步骤(亲测)
  • 十八、完成登录与注册页面的前端
  • 5_ROS学习
  • 小白错误三——Collider存在,刚体存在情况下,不能触发OnCollisionEnter函数
  • windows service in vs
  • Alpha 冲刺5
  • 机器学习原理视频
  • Ubuntu 下 MySQL 数据自执行备份