标签:
实现效果:
HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴效果</title> </head> <body> <div class="main"> <ul id="expand"> <li> <h3 class="h3-common">第一类目</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li> <h3 class="h3-common">第二类目</h3> <ul> <li>5</li> <li>6</li> <li>7</li> </ul> </li> <li> <h3 class="h3-common">第三类目</h3> <ul> <li>8</li> <li>9</li> <li>10</li> <li>11</li> </ul> </li> <li> <h3 class="h3-common">第四类目</h3> <ul> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ul> </li> </ul> </div> </body> </html>
CSS代码:
/* * by @Kevinの快乐时代 *2015/5/21 */ *{ margin: 0;padding: 0; } ul,li{ list-style: none; } .main{ width: 300px; color:#666; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin:auto; } .main ul li ul{ display: none; padding: 15px; background-color: #ecf0f1; } #expand li ul li { padding: 5px 0; border-bottom: 1px dotted #999; } .h3-common{ font-size: 15px; color: #fff; padding: 5px 22px; border-bottom: 1px dotted #e7e7e7; } .main h3{ background: url(http://www.iconfont.cn/uploads/fonts/font-155705-.png?color=ecf0f1&size=20) no-repeat #00bb9c left center; } .main h3.active{ background: url(http://www.iconfont.cn/uploads/fonts/font-69084-.png?color=ecf0f1&size=20) no-repeat #ea8010 left center; } .li_active{ background-color: #56abe4; color: #fff; text-align: center; border-radius: 3px; }
javascript代码:
var oExpand=document.getElementById(‘expand‘); var ah3=oExpand.getElementsByTagName(‘h3‘); var aUl=oExpand.getElementsByTagName(‘ul‘); var aLi=null; var arrLi=[]; for(var i=0;i<ah3.length;i++){ ah3[i].index=i; ah3[i].onclick=function(){ var current_num=this.index;//添加自定义索引值 for(var i=0;i<aUl.length;i++){ //没被选中的ul折叠起来 if(ah3[i] != this){ ah3[i].className="h3-common"; aUl[i].style.display="none"; } } //展开,收起 if(!ah3[current_num].classList.contains(‘active‘)){ ah3[current_num].classList.add(‘active‘); aUl[current_num].style.display=‘block‘; }else{ ah3[current_num].classList.remove(‘active‘); aUl[current_num].style.display=‘none‘; } } } //添加数组 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<arrLi.length;i++){ arrLi[i].onclick=function(){ //初始化其他li for(var i=0;i<arrLi.length;i++){ if(arrLi[i] !=this){ arrLi[i].className=‘‘; } } //元素本身的点击选中,再点击消失;.li_active是选中时的状态 if(!this.classList.contains(‘li_active‘)){ this.classList.add(‘li_active‘); }else{ this.classList.remove(‘li_active‘) } } }
标签:
原文地址:http://www.cnblogs.com/kevinCoder/p/4520024.html