php下拉框js,原生js实现下拉列表框

模仿qq列表点击下拉，js原生实现，免费源码提供研究，拿去吧！关注PHP中文网给你更多好看的！

代码：

PHP中文网--下拉框

ul , h2 { padding:0; margin:0; }

li { list-style:none; }

#list { width:240px; border:1px solid #333; margin:0 auto; }

#list .lis {}

#list h2 { height:30px; line-height:30px; text-indent:20px; background:yellow; color:#000; }

#list .active { background:orange; color:#000; }

#list ul { display:none; }

#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }

#list ul .hover { background:pink; }

window.onload = function (){

var oUl = document.getElementById('list');

var aH2 = oUl.getElementsByTagName('h2');

var aUl = oUl.getElementsByTagName('ul');

var aLi = null;

var arrLi = [];

for(var i=0;i

aH2[i].index=i;

aH2[i].onclick = function(){

for(var i=0;i

if(aH2[i] !=this){

aUl[i].style.display='none';

aH2[i].className='';

}

}

if(this.className==''){

aUl[this.index].style.display='block';

this.className='active';

}else{

aUl[this.index].style.display='none';

this.className='';

}

};

}

for(var i=0;i

aLi = aUl[i].getElementsByTagName('li');

for(var j=0;j

arrLi.push(aLi[j]);

}

}

for(var i=0;i

arrLi[i].οnclick=function(){

for(var i=0;i

if(arrLi[i] !=this){

arrLi[i].className='';

}

}

if(this.className==''){

this.className='hover';

}else{

this.className='';

}

};

}

};

我的好友

a111a222a333a444

陌生人

• b111
• b222
• b333
• b444
• b555

黑名单

• c111
• c222

免费拿去研究吧！更多好的源码尽在PHP中文网，关注我们给你好看哦~

相关推荐：