原生js实现下拉列表框
程序员文章站
2022-03-26 14:31:22
...
模仿qq列表点击下拉,js原生实现,免费源码提供研究,拿去吧!关注PHP中文网给你更多好看的!
代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PHP中文网--下拉框</title> <style> 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; } </style> <script> 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=''; } }; } }; </script> </head> <body> <ul id="list" style="margin-top:50px;"> <li class="lis"> <h2>我的好友</h2> <ul> <li>a111</li> <li>a222</li> <li>a333</li> <li>a444</li> </ul> </li> <li class="lis"> <h2>陌生人</h2> <ul> <li>b111</li> <li>b222</li> <li>b333</li> <li>b444</li> <li>b555</li> </ul> </li> <li class="lis"> <h2>黑名单</h2> <ul> <li>c111</li> <li>c222</li> </ul> </li> </ul> </body> </html>
免费拿去研究吧!更多好的源码尽在PHP中文网,关注我们给你好看哦~
相关推荐:
以上就是原生js实现下拉列表框的详细内容,更多请关注其它相关文章!
上一篇: Python获取网页上图片下载地址的方法
下一篇: java的编译运行方式有什么好处