<!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <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 li:hover,#friend li ul li.hover{ background:#EFF4E0;}*/ #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 = []; // ali每個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] );//把所有li元素放入li列表數組中 } } // alert( arrLi.length ); for ( var i=0; i<aH.length; i++ ) { aH[i].index = i;//標題數組 aH[i].onclick = function () { //點擊時，不是當前index=this 隱藏H和ul的class類的樣式 for ( var i=0; i<aH.length; i++ ) { if ( this != aH[i] ) { aH[i].className = ''; aUl[i].className = ''; } } //對當前index=this class類樣式進行修改： 顯示和隱藏 if ( this.className == '' ) { this.className = 'hover'; aUl[this.index].className = 'hover'; } else { this.className = ''; aUl[this.index].className = ''; //獲取當前index=index的li數組 顯示 var aLi = aUl[this.index].getElementsByTagName('li'); for ( var i=0; i<aLi.length; i++ ) { aLi[i].className = ''; aLi[i].onOff = true; } } }; } //對所有的li標籤處理 over和out事件的樣式 for ( var i=0; i<arrLi.length; i++ ) { arrLi[i].onOff = 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 class="">導師篇</h2> <ul class=""> <li>導師信息</li> <li>研究方向</li> <li>研究團隊</li> <li>就業方向</li> </ul> </li> <li> <h2 class="">考研資訊</h2> <ul class="" > <li>歷年真題</li> <li>考前資訊</li> <li>考研心得</li> <li>複試之路</li> <li>相關視頻</li> </ul> </li> <li> <h2 class="">生活篇</h2> <ul class=""> <li>驢友生活</li> <li>比賽活動</li> <li>時光紀念館</li> </ul> </li> </ul> </body> </html>
列表展開
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章