收缩展开菜单

Posted Mr_W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了收缩展开菜单相关的知识，希望对你有一定的参考价值。

<!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>

 

查看范例

以上是关于收缩展开菜单的主要内容，如果未能解决你的问题，请参考以下文章

jquery 菜单展开与收缩参考脚本

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

ASP中关于TreeView控件的问题，怎样展开、收缩所有子节点？

Axure中继器实现子表的展开和收缩（载入时展开子表）

antdesignvuemenu树展开收缩图标点击文字不展开

jquery 怎么实现展开和收起按钮之间的切换