1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>dom-操作</title> 6 </head> 7 <style> 8 body,ul,dl,dt,dd{ 9 padding: 0;margin: 0;list-style: none; 10 } 11 #wrap{ 12 width: 900px; 13 height: 400px; 14 background: linear-gradient(to right bottom,#21ffff,#ce6584); 15 position: absolute; 16 left: 0; 17 top: 0; 18 bottom: 0; 19 right: 0; 20 margin: auto; 21 box-sizing: border-box; 22 padding: 80px 0; 23 } 24 #content{ 25 width: 700px; 26 height: 240px; 27 background: rgba(255,255,255,0.5); 28 margin: 0 auto; 29 } 30 #top-wrap{ 31 height: 50px; 32 background: rgba(255,255,255,0.2); 33 } 34 .fl{ 35 float: left; 36 } 37 .fr{ 38 float: right; 39 } 40 .clearfix::after{ 41 content: ""; 42 display: block; 43 height: 0; 44 clear: both; 45 } 46 .top-l,.top-r{ 47 float: left; 48 height: 100%; 49 font-size: 14px; 50 } 51 .top-l{ 52 width: 100px; 53 line-height: 50px; 54 text-align: center; 55 } 56 .top-r{ 57 width: calc(100% - 100px); 58 padding: 11px 0; 59 box-sizing: border-box; 60 } 61 .top-r li{ 62 border: 2px solid #10aaff; 63 height: 24px; 64 line-height: 24px; 65 float: left; 66 padding: 0 5px; 67 margin-right: 5px; 68 display: none; 69 } 70 .details{ 71 padding: 0 5px; 72 color: #10aaff; 73 } 74 .close{ 75 padding: 0 5px; 76 color: #fff; 77 background: #10aaff; 78 cursor: pointer; 79 } 80 dl{ 81 height: 40px; 82 line-height: 40px; 83 font-size: 14px; 84 } 85 dt{ 86 padding-right:20px; 87 color: #848a8c; 88 } 89 dl dd{ 90 float: left; 91 margin-right: 20px; 92 color: #181818; 93 cursor: pointer; 94 } 95 #inof-wrap{ 96 padding: 15px 20px; 97 box-sizing: border-box; 98 background: rgba(255,255,255,0.6); 99 } 100 #inof-wrap dl:first-child{ 101 border-bottom: 1px dashed #5acbd6; 102 } 103 #inof-wrap dl:nth-child(3){ 104 border-bottom: 1px dashed #5acbd6; 105 border-top: 1px dashed #5acbd6; 106 } 107 .active{ 108 color: #10aaff; 109 } 110 </style> 111 <body> 112 <div id="wrap"> 113 <div id="content"> 114 <div id="top-wrap"> 115 <div class="top-l">你的选择:</div> 116 <ul class="top-r"> 117 <li><span class="details">苹果</span><span class="close">×</span></li> 118 <li><span class="details">3.0英寸以下</span><span class="close">×</span></li> 119 <li><span class="details">安卓(Android)</span><span class="close">×</span></li> 120 <li><span class="details">联通3G</span><span class="close">×</span></li> 121 </ul> 122 </div> 123 <div id="inof-wrap"> 124 <dl> 125 <dt class="fl">品牌:</dt> 126 <dd>苹果</dd> 127 <dd>小米</dd> 128 <dd>锤子</dd> 129 <dd>魅族</dd> 130 <dd>华为</dd> 131 <dd>OPPO</dd> 132 <dd>vivo</dd> 133 <dd>乐视</dd> 134 <dd>360</dd> 135 <dd>中兴</dd> 136 <dd>索尼</dd> 137 </dl> 138 <dl> 139 <dt class="fl">尺寸:</dt> 140 <dd>3.0英寸以下</dd> 141 <dd>3.0-3.9英寸</dd> 142 <dd>4.0-4.5英寸</dd> 143 <dd>4.6-4.9英寸</dd> 144 <dd>5.0-5.5英寸</dd> 145 <dd>6.0英寸以上</dd> 146 </dl> 147 <dl> 148 <dt class="fl">系统:</dt> 149 <dd>安卓(Android)</dd> 150 <dd>苹果(IOS)</dd> 151 <dd>微软(WindowsPhone)</dd> 152 <dd>无</dd> 153 <dd>其他</dd> 154 </dl> 155 <dl> 156 <dt class="fl">网络:</dt> 157 <dd>联通3G</dd> 158 <dd>双卡单4G</dd> 159 <dd>双卡双4G</dd> 160 <dd>联通4G</dd> 161 <dd>电信4G</dd> 162 <dd>移动4G</dd> 163 </dl> 164 </div> 165 </div> 166 </div> 167 </body> 168 <script> 169 "use strict"; 170 let aLi=document.querySelectorAll(‘.top-r li‘); 171 let aClose=document.querySelectorAll(‘.top-r .close‘); 172 let aDl=document.querySelectorAll(‘#inof-wrap dl‘); 173 let aDd=document.querySelectorAll(‘#inof-wrap dl dd‘); 174 for(let i=0;i<aDd.length;i++){ 175 aDd[i].onclick=function(){ 176 if(this.getAttribute("class")!=="active" && !this.parentNode.querySelector(‘.active‘)){ 177 this.className="active"; 178 }else{ 179 this.parentNode.querySelector(‘.active‘).className=""; 180 this.className="active"; 181 } 182 let parentName=this.parentNode.querySelector(‘.fl‘).innerHTML; 183 if(parentName=="品牌:"){ 184 aLi[0].style.display="block"; 185 aLi[0].querySelector(‘.details‘).innerHTML=this.innerHTML; 186 }else if(parentName=="尺寸:"){ 187 aLi[1].style.display="block"; 188 aLi[1].querySelector(‘.details‘).innerHTML=this.innerHTML; 189 }else if(parentName=="系统:"){ 190 aLi[2].style.display="block"; 191 aLi[2].querySelector(‘.details‘).innerHTML=this.innerHTML; 192 }else{ 193 aLi[3].style.display="block"; 194 aLi[3].querySelector(‘.details‘).innerHTML=this.innerHTML; 195 } 196 } 197 } 198 for(let i=0;i<aClose.length;i++){ 199 aClose[i].index=i; 200 aClose[i].onclick=function(){ 201 this.parentNode.querySelector(‘.details‘).innerHTML=‘‘; 202 this.parentNode.style.display=‘none‘; 203 aDl[this.index].querySelector(‘.active‘).className=""; 204 } 205 } 206 </script> 207 </html>
