<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收缩展开菜单</title>
<style type="text/css">
p,ul,li{padding:0;margin:0;list-style: none;}
#box{font-size: 12px;color:#00c;width:58px;margin: 0 auto;}
p{width: 58px;height: 24px;line-height: 24px;padding-left: 3px;background: #C5CCC9;}
ul{width:56px;border:1px solid #9a99ff;display: none;margin-top:3px;}
a{text-decoration: none;display:block;height:24px;line-height: 24px;text-align: center;color:#00c;}
a:hover{background: #d9e1f6;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
var oUl=document.getElementById('ul1');
oBtn.onclick=function(){
if (oUl.style.display=='block') {
oUl.style.display='none';
}else{//none
oUl.style.display='block';
};
}
}
</script>
</head>
<body>
<!-- 如果菜单显示就把他隐藏，如果菜单隐藏就显示出来 -->
<div id="box">
<p id="btn">输入法</p>
<ul id="ul1" style="display:block;">
<li><a href="#">手写</a></li>
<li><a href="#">拼音</a></li>
<li><a href="#">关闭</a></li>
</ul>
</div>
</body>
</html>
查看范例
