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>
