通过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'
}
]
}, ]