自由展开收缩的好友列表 

<!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>

 

posted @ 2020-08-19 15:10  webxy  阅读(167)  评论(0)    收藏  举报