模仿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.length;i++){ aH2[i].index=i; aH2[i].onclick = function(){ for(var i=0;i<aH2.length;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<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(){ for(var i=0;i<arrLi.length;i++){ if(arrLi[i] !=this){ arrLi[i].className=''; } } if(this.className==''){ this.className='hover'; }else{ this.className=''; } }; } }; 我的好友 a111 a222 a333 a444 陌生人 b111 b222 b333 b444 b555 黑名单 c111 c222 #免費拿去研究吧!更多好的源碼盡在PHP中文網,關注我們給你好看哦~相關推薦:css,js骰子抽獎源碼#html會動的小狗狗源碼js原聲實作簡單的微信聊天功能#