Imitateqq list드롭다운을 클릭하고, 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 중국어 홈페이지에서 보실 수 있으니 팔로우하시면 잘 보실 수 있습니다~
관련 추천 :
css, js dice lottery source code
위 내용은 드롭다운 목록 상자의 기본 js 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!