1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script type="text/javascript"> 6 window.onload=function(){ 7 var clicked=document.getElementById('ck'); 8 var lists=document.getElementById('list'); 9 clicked.onclick=function(){ 10 // 判断赋值记得加上引号！！ 11 if(lists.style.display=='block') 12 lists.style.display='none'; 13 else if(lists.style.display=='none') 14 lists.style.display='block'; 15 }; 16 }; 17 </script> 18 <style type="text/css"> 19 p,ul,li{ 20 list-style: none; 21 padding:0;/*去除列表内外边距！！*/ 22 margin:0; 23 } 24 p{ 25 width:58px; 26 padding:3px; 27 } 28 a{ 29 text-decoration: none; 30 height:24px; 31 line-height:24px; 32 padding:5px 12px 5px 12px;/*可能不太准确*/ 33 } 34 #zong{ 35 color:#00c; 36 } 37 ul{ 38 border: solid 1px red; 39 width:56px; 40 text-align: center; 41 } 42 a:hover{ 43 background: #12a; 44 } 45 46 </style> 47 </head> 48 <body> 49 <div id="zong"> 50 <p id="ck">输入法</p> 51 <ul id="list" style="display: block;"> 52 <li><a href="#">百度</a></li> 53 <li><a href="#">搜狗</a></li> 54 <li><a href="#">自动</a></li> 55 </ul> 56 </div> 57 </body> 58 </html>
