手风琴效果（vue实现）
2024-06-20 21:07:41
效果图：
源码1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><style>*{margin: 0;padding: 0;}ul{list-style: none;}li{padding-left: 10px;line-height: 2;}li:hover{background-color: #eee;}.list{padding: 0 50px;}.list .title{border: 1px solid #ccc;padding: 10px 5px;cursor: pointer;-webkit-user-select: none;user-select: none;font-size: 18px;font-weight: bold;}.list .item{border: 1px solid #ccc;}.list:not(:nth-of-type(1)) .item{display: none;}</style>
</head>
<body><div id="app"><div class="list" v-for="(l,i) in lists" :key="i"><div class="title" @click="toggle($event)">{{l.title}}</div><ul class="item"><li v-for="(item,index) in l.items" :key="index">{{item}}</li></ul></div></div><script>var app = new Vue({el: '#app',data: {lists: [{ title:'我的同学', items:["张三", "李四", "王五"] },{ title:'我的同事', items:["张三1", "李四1", "王五1"] },{ title:'我的家人', items:["张三2", "李四2", "王五2"] }]},methods: {toggle: function(ev){var $title = $(ev.target);$title.parents('#app').find('.item').hide();$title.next().show(1000);}}})</script>
</body>
</html>
源码2.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>* {margin: 0;padding: 0;}ul {list-style: none;}li {padding-left: 10px;line-height: 2;}li:hover {background-color: #eee;}.list {padding: 0 50px;}.list .title {border: 1px solid #ccc;padding: 10px 5px;cursor: pointer;-webkit-user-select: none;user-select: none;font-size: 18px;font-weight: bold;}.list .item {border: 1px solid #ccc;}</style>
</head><body><div id="app"><div class="list" v-for="(l,i) in lists" :key="i"><div class="title" @click="toggle(i)">{{l.title}}</div><ul class="item" v-show="l.show"><li v-for="(item,index) in l.items" :key="index">{{item}}</li></ul></div></div><script>var app = new Vue({el: '#app',data: {lists: [{ title: '我的同学', items: ["张三", "李四", "王五"], show: false },{ title: '我的同事', items: ["张三1", "李四1", "王五1"], show: true },{ title: '我的家人', items: ["张三2", "李四2", "王五2"], show: false }]},methods: {toggle: function (index) {// ES6的新语法，称为箭头函数， 它是语法糖。// 当箭头函数函数体中只有一条语句时，return语句可省略。this.lists.forEach((list, i) => list.show = i == index)// 回调函数， 回调函数有三个形参，list当前循环中对象,i表示当前循环中的索引// arr 表示循环的数组本身// this.lists.forEach(function(list, i, arr){// // console.log(arr[i]==list);// // return list.show = i == index;// if(i == index){// list.show = true;// } else {// list.show = false;// }// });}}})</script>
</body></html>
https://www.cnblogs.com/Smiled/p/7610905.html
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素
$(selector).toggle(speed,callback,switch)
效果图：再点击时候只打开点击哪个的列表，其他的 关闭
安装 npm install --save-dev less-loader less
<template><div><button v-on:click="decrement">-</button><input type="text" size="1" v-model="num"><button @click="increment">+</button><div class="header"><ul><!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 --><li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData" :key="index"><!-- 在这里打印出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)" :key="index">{{a}}</li></ul></li></ul></div></div>
</template>
<script>
export default {//props:["num"],//从helloworld组件里面传一个初始值10。父组件到子组件data(){return{num:0,headerData: [{name: '客舱服务',list: ["机上升舱", "呼唤铃", "机上餐食", "我的行程", "安全须知"],show: true}, {name: '精彩华夏',list: ["品牌介绍", "华夏通程", "航线特惠", "华夏文化"],show: true}, {name: '娱乐',list: ["影视", "音乐", "游戏", "阅读"],show: true}]} },methods:{increment(){this.num++},decrement(){if (this.num<=0){alert('受不了啦，宝贝不能再减少啦')this.num=0;}else {this.num--;}},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)}}
}
</script>
<style lang="less" scoped>input{text-align: center;}.header {width: 20%;background-color: rgb(0, 50, 116);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: rgb(7, 27, 53);}>ul {width: 100%;background: rgb(0, 50, 116);li{&:hover{background: rgb(0, 50, 116);}}}}.active {background-color: rgb(12, 48, 94);}}}
</style>手风琴效果（vue实现）相关推荐
- vue 手风琴效果_Vue实现侧边菜单栏手风琴效果实例代码
编程之家收集整理的这篇文章主要介绍了Vue实现侧边菜单栏手风琴效果实例代码,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 效果图如下所示: {{item.name}} { // 判断如 ...
- vue怎么实现手风琴效果_Vue动画实现简易手风琴组件
1.需求描述 最近做Vue项目有个需求,用手风琴效果实现对企业信息的展示,具体是在鼠标移入时,图片拉伸放大,其中包含标题及简述的浮现,流畅度要高.经过一番思考研究终于完成了,下面上代码. 2.代码部分 ...
- 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 ...
- 第62天：手风琴效果
手风琴效果: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset= ...
- 使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果 本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
- WEB前端：06_accordion手风琴效果
accordion手风琴效果 网站常用效果之一,以下为简化版,用于学习javascript基础知识. 效果图: accordion手风琴效果 - 纯js简化版 <html> <hea ...
- 不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
园子中的朋友大家好.在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法.感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力.在这篇文章中我们将介绍 Accor ...
最新文章
- 写给非技术人员的机器学习指南
- 用python画花瓣-Python竟能画这么漂亮的花,帅呆了(代码分享)
- mysql讀取sql_SQL 2008连接读取mysql数据的方法
- iReport 4.1 报表、子报表、主从报表、合计、实例解析
- [2021-09-04 AtCoder Beginner Contest 217] 题解
- 安卓TCP通信版本2
- AI应用开发实战系列之一： 从零开始配置环境
- oracle中的case when then else end 用法
- Idea设置多开窗口
- Java基础学习总结（109）——Jdk动态代理和cglib动态代理总结
- 跑腿源码之外卖人v9.1_9.2的升级过程For 9.0及小程序及（客户端，配送端，商户端）的二次编译方法
- 从音箱入门到高手必看知识（一）—— 音箱初级知识
- 【历史上的今天】2 月 22 日：Red Hat Enterprise Linux 问世；BASIC 语言作者出生；计算机协会创始人诞生
- 数据分析--卡方分析与方差分析
- 台式计算机 cpu型号大全,电脑cpu的型号有哪些?
- /deep/的使用与导致样式失效问题处理
- sql中向下取整怎么取_Sql Server 里的向上取整、向下取整、四舍五入取整的实例！...
- 【Python卸载】与Windows上【Anaconda安装】
- Android 修改默认的背景壁纸（msm8909）
- 汇信软件入选山东省优秀软件企业、标志性软件产品项目