Imitierenqq-ListeKlicken Sie zum Dropdown, jsnative Implementierung, Kostenloser Quellcode bietet Recherche, nehmen Sie es! Folgen Sie der PHP-Chinese-Website, um weitere interessante Dinge zu erfahren!
Code:
<!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>
Nehmen Sie es und lernen Sie es kostenlos! Weitere gute Quellcodes finden Sie auf der PHP-Chinese-Website. Folgen Sie uns, um einen guten Einblick zu erhalten~
Verwandte Empfehlungen:
CSS, JS-Würfel-Lotterie-Quellcode
HTML-Quellcode für bewegliche Welpen
Das obige ist der detaillierte Inhalt vonNative JS-Implementierung des Dropdown-Listenfelds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!