通过vue框架实现手风琴菜单（有什么写的不好的地方，请评论）
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入通过vue框.
·
通过vue框架实现手风琴菜单
实现效果
- html
<div id="app">
<ul class="list">
<li v-for="item,i in dataList">
<a href="#" v-on:click="dianji(i)" v-bind:style="{background:index==i?'#faaf':'rgb(105, 218, 208)'}"
v-text="item.title"></a>
<ul v-bind:style="{display:index==i?'block':'none'}" v-for="opt in item.list1">
<li v-text="opt.content">list1_content1</li>
</ul>
</li>
</ul>
</div>
- css
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.list {
width: 400px;
margin: 100px auto 0;
text-align: center;
}
.list>li {
width: 400px;
}
.list>li a {
display: block;
width: 400px;
height: 40px;
background: rgb(105, 218, 208);
line-height: 40px;
color: #fff;
text-decoration: none;
}
/* .list>li a:hover {
text-decoration: underline;
background: #faaf;
color: aliceblue;
} */
.list>li>ul {
display: none;
}
.list>li>ul>li {
display: block;
width: 400px;
line-height: 40px;
height: 40px;
background: rgb(93, 201, 90);
}
</style>
- js
var vm = new Vue({
el: '#app',
data: {
dataList,
index: -1
},
methods: {
dianji(i) {
if (this.index == i) {
this.index = -1;
} else {
this.index = i;
}
}
}
})
- 数据
var dataList = [{
title: 'list1',
list1: [{
content: 'list1_content1'
},
{
content: 'list1_content2'
},
{
content: 'list1_content3'
}
]
}, {
title: 'list2',
list1: [{
content: 'list2_content1'
},
{
content: 'list2_content2'
},
{
content: 'list2_content3'
}
]
}, {
title: 'list3',
list1: [{
content: 'list3_content1'
},
{
content: 'list3_content2'
},
{
content: 'list3_content3'
}
]
}, {
title: 'list4',
list1: [{
content: 'list4_content1'
},
{
content: 'list4_content2'
},
{
content: 'list4_content3'
}
]
}, ]
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)