<!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>
列表展开
最新推荐文章于 2023-10-21 18:49:23 发布