列表展開收縮效果
阿新 • • 發佈：2019-01-06
該效果模仿qq列表，點選展示具體聯絡人，再次點選則關閉列表
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> * { margin: 0; padding: 0; list-style: none; font-family: "微軟雅黑"; } #friend { width: 300px; margin: 50px auto 0; border-left: 1px solid #ccc; border-right: 1px solid #dadada; } #friend h2 { width: 270px; height: 35px; line-height: 35px; padding-left: 30px; background: url(img/icon_lft.png) 10px no-repeat #74a400; color: #fff; font-size: 16px; font-weight: 100; cursor: pointer; } #friend h2.hover { background: url(img/icon.png) 10px no-repeat #74a400; } #friend li { margin-bottom: 1px; } #friend li ul li { width: 270px; padding-left: 30px; height: 30px; line-height: 30px; border-bottom: 1px solid #ccc; cursor: pointer; } #friend li ul .hover { background: #EFF4E0; } #friend li ul .active { background: #FFC; } #friend li ul { display: none; } #friend li ul.hover { display: block; } </style> <script> window.onload = function() { var oUl = document.getElementById('friend'); var aLi = oUl.getElementsByTagName('li'); var aH = oUl.getElementsByTagName('h2'); var aUl = oUl.getElementsByTagName('ul'); var aLi = null; var arrLi = []; // 用於存放id=friend的ul標籤裡面的li標籤 for(var i = 0; i < aUl.length; i++) { aLi = aUl[i].getElementsByTagName('li'); for(var j = 0; j < aLi.length; j++) { arrLi.push(aLi[j]); //將獲取到的節點存入數組裡面 } } for(var i = 0; i < aH.length; i++) { //設定index屬性的值 aH[i].index = i; //每一個h2標籤被點選 aH[i].onclick = function() { //沒有class就給他類名hover，反之清空類名 if(this.className == '') { this.className = 'hover'; aUl[this.index].className = 'hover'; } else { this.className = ''; aUl[this.index].className = ''; var aLi = aUl[this.index].getElementsByTagName('li'); for(var i = 0; i < aLi.length; i++) { aLi[i].className = ''; aLi[i].onOff = true;//設定標量值 } } }; } for(var i = 0; i < arrLi.length; i++) { arrLi[i].onOff = true; //標量值為true則代表滑鼠在上面，新增對應樣式 arrLi[i].onmouseover = function() { if(this.onOff) { this.className = 'active'; } }; //設定滑鼠移出移除樣式 arrLi[i].onmouseout = function() { if(this.onOff) { this.className = ''; } else { this.className = 'hover'; } }; arrLi[i].onclick = function() { for(var i = 0; i < arrLi.length; i++) { if(this != arrLi[i]) { arrLi[i].className = ''; arrLi[i].onOff = true; } } if(this.onOff) { this.className = 'hover'; this.onOff = false; } else { this.className = ''; this.onOff = true; } }; } } </script> </head> <body> <ul id="friend"> <li> <h2>我的好友</h2> <ul> <li>張一</li> <li>張二</li> <li>張三</li> </ul> </li> <li> <h2>我的同事</h2> <ul> <li>張四</li> <li>張五</li> <li>張六</li> <li>張七</li> <li>張八</li> </ul> </li> <li> <h2>我的同學</h2> <ul> <li>張九</li> <li>張十</li> <li>張十一</li> </ul> </li> </ul> </body> </html>