说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>百度输入法</title> <style> body,ul,li,button{ /*去掉内外边距*/ margin:0; padding:0; } body{ font:12px/1.5 Tahoma; /*字号行高字号*/ } ul{ list-style-type:none; /*无序列表去掉样式*/ } button{ cursor:pointer; /*鼠标手形*/ } #outer{ width:70px; margin:10px auto;/*左右置中*/ } #ime{ margin-top:5px; /*上外边距5像素*/ background:#fff; /*白色*/ border:1px solid #9a99ff; /*边框蓝色*/ display:none; /*默认为隐藏*/ } #ime li{ /*后代元素选择法*/ width:100%; line-height:24px; /*行高*/ display:inline-block; /*行内块元素*/ } #ime li a:hover{ background:#d9e1f6; /*浅蓝色*/ } </style> <script> window.onload = function () { var oBtn = document.getElementsByTagName("button")[0]; //获取按钮集合中的第1个 var oIme = document.getElementById("ime");//获取无序列表引用 var oClose = document.getElementById("close"); //获取关闭li元素引用 var style = oIme.style; //把ul列表的样式属性赋值给本地变量 style oBtn.onclick = function () { style.display = style.display == "block" ? "none" : "block";//三元操作法，切换样式以达到显示/隐藏目的 }; oClose.onclick = function () {//注册click事件，点击后隐藏整个无序列表 style.display = "none"; } } </script> </head> <body> <!--div包裹一个button和无序列表ul--> <div id="outer"> <button>输入法</button> <ul id="ime"> <li><a href="javascript:;">手写</a></li> <li><a href="javascript:;">拼音</a></li> <li id="close"><a href="javascript:;">关闭</a></li> </ul> </div> </body> </html>