<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自由展开收缩的好友列表</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
body,ul,li,h2{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.list>div{
margin-bottom: 10px;
}
.list .show{
display: block;
}
body{
width: 1000px;
height: 800px;
margin: 0 auto;
background: palevioletred;
}
.wrap{
width: 384px;
height: 707px;
background: blanchedalmond;
margin: 0 auto;
position: relative;
}
.list{
width: 280px;
position: absolute;
left: 46px;
height: 64px;
}
.list h2{
height: 48px;
font: 14px/48px arial;
color: #fff;
background: rgba(0,0,0,.8);
box-sizing: border-box;
padding-left: 10px;
margin-top: 10px;
}
.list h2:nth-of-type(1){
margin: 0;
}
.list h2.active{
background: rgba(211,84,111,.8);
}
.list span{
width: 0;
height: 0;
display: inline-block;
border: 6px dashed rgba(0,0,0,0);
border-left: 6px solid rgba(225,225,225,1);
margin-right: 10px;
position: relative;
}
ul{
display: none;
}
</style>
<script>
let data=[
{
title:'品牌',
list:[
"苹果",
"小米",
"锤子",
"魅族",
"华为",
"三星",
"OPPO",
"vivo",
"乐视",
"360",
"中兴",
]
},
{
title:'尺寸',
list:[
"3.0英寸以下",
"3.0-3.9英寸",
"4.0-4.5英寸",
"4.6-4.9英寸",
"5.0-5.5英寸",
"6.0英寸以上"
]
},
{
title:'系统',
list:[
"安卓",
"苹果",
"微软",
"无",
"其他",
]
},
{
title:'网络',
list:[
"联通3G",
"双卡单4G",
"双卡双4G",
"联通4G",
"电信4G",
"移动4G",
]
},
]
</script>
</head>
<body onselectstart="return false">
<div class="wrap" id="app">
<div class="list">
<div v-for="item,i in qq">
<h2
:class="{active:i===index}"
@click="showListHandle(i)"
><span></span>{{item.title}}</h2>
<ul :class="{show:i===index}">
<li v-for="option in item.list">{{option}}</li>
</ul>
</div>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
qq:data,
index:''
},
methods:{
showListHandle(index){
this.index=this.index===index?'':index;
}
}
})
</script>
</html>
