- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body,
- ul,
- li,
- h2 {
- margin: 0;
- padding: 0;
- }
- li {
- list-style: none;
- }
- body {
- width: 1000px;
- height: 800px;
- background: url(../img/bg.png) no-repeat center center;
- margin: 0 auto;
- }
- .wrap {
- width: 384px;
- height: 707px;
- background: url(../img/bg1.png) no-repeat center center;
- margin: 0 auto;
- position: relative;
- }
- .list {
- width: 280px;
- position: absolute;
- left: 46px;
- top: 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(221,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(255,255,255,1);
- margin-right: 10px;
- position: relative;
- top: 1px;
- }
- .list span.active {
- width: 0;
- height: 0;
- display: inline-block;
- border: 6px dashed rgba(0,0,0,0);
- border-top: 6px solid rgba(255,255,255,1);
- position: relative;
- top: 4px;
- }
- .list ul {
- background: #000000;
- color: #fff;
- display: none;
- }
- .list li {
- height: 40px;
- font: 14px/40px "微软雅黑";
- box-sizing: border-box;
- padding-left: 34px;
- }
- .list li.active {
- background: rgba(255,255,255,.4);
- }
- .list li.selected {
- background: rgba(221,84,111,.6);
- }
- .list>div {
- margin-bottom: 10px;
- }
- .list .show {
- display: block;
- }
- </style>
- <link rel="stylesheet" type="text/CSS" href="./css/qq.css" />
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- let data = [{
- title: '品牌',
- index: -1,
- list: ["苹果", "小米", "锤子", "魅族", "华为"]
- },
- {
- title: '尺寸',
- list: ["3.0 英寸以下", "3.0-3.9 英寸", "4.0-4.5 英寸"]
- },
- {
- title: '系统',
- list: ["安卓", "苹果"]
- },
- {
- title: '网络',
- list: ["联通 3G", "双卡单 4G", "双卡双 4G"]
- }
- ]
- </script>
- </head>
- <body onselectstart="return false;">
- <div class="wrap" id="app">
- <div class="list">
- <div v-for = "item,i in qq">
- <h2 @click = "showListHandle(i)" :class="{active: i === index}">
- <span></span>
- {{item.title}}
- </h2>
- <ul :class="{show: i === index}">
- <li v-for = "option in item.list">{{option}}</li>
- </ul>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- qq:data,
- index: ''
- },
- methods: {
- showListHandle(index) {
- this.index = this.index === index ? '' : index
- }
- }
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17568/b04b4a26b87c6b7ec01dbcec8591d7b9.html