javascript竖向菜单,纵向菜单

<html>
<meta http-equiv="content" content="text/html;charset=utf-8"/>
<head><title>
竖向折叠菜单
</title>
<style type="text/css">
*{margin:0;padding:0;font-size:14px;list-style:none;}
#nav{margin:10px;text-align:center;line-height:25px;width:200px;}
.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}
.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div id="nav">
<div class="title" id="menu1" onclick="showmenu('1')">Javascript下载</div>
<div id="list1" class="content" style="display:none">
<ul>
<li>Jqurey</li>
<li>Typescript</li>
<li>Extjs</li>
</ul>
</div>
<div class="title" id="menu2"onclick="showmenu('2')">网页代码</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>菜单导航</li>
<li>层和布局</li>
<li>图片切换</li>
</ul>
</div>
</div>
<script language="javascript">
function showmenu(id){
	var list=document.getElementById('list'+id);
	var menu=document.getElementById('menu'+id);
	if(list.style.display=="none"){
		document.getElementById("list"+id).style.display="block";
		menu.className="title1";
	}else{
		document.getElementById('list'+id).style.display="none";
		menu.className="title";
	}
}
</script>
</body>
</html>

下面是用jquery写在纵向菜单展现形式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#fold{width: 200px;font:14px/1.6em Arial, Helvetica, sans-serif ;text-align: left;}
			ul{width: 100px;text-align: center;margin: 0;padding: 0;}
			li{width:100%;list-style-type: none;background-color: green;margin-bottom: 1px;}
			.wrap{border: 1px solid green;width: 98px;}
			.wrap li{background: white;}
			a:link{text-decoration: none;}
			a:visited{color: white;}
			.wrap li a:visited{color: black;}
		</style>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
	</head>
	<body>
		<div id="fold">
			<ul>
				<li><a href="#">信息管理</a><ul class="wrap">
					<li><a href="#">未读信息</a></li>
					<li><a href="#">已读信息</a></li>
					<li><a href="#">信息列表</a></li>
				</ul></li>
				<li><a href="#">商品管理</a><ul class="wrap">
					<li><a href="#">商品添加</a></li>
					<li><a href="#">商品列表</a></li>
					<li><a href="#">商品分类</a></li>
				</ul></li>
				<li><a href="#">用户管理</a><ul class="wrap">
					<li><a href="#">权限设置</a></li>
					<li><a href="#">用户列表</a></li>
					<li><a href="#">重置密码</a></li>
				</ul></li>	
			</ul>
		</div>
		<script>
			$('#fold>ul>li:first').find('.wrap').css({display:'block'});
			$('#fold>ul>li').click(function(){
				$(this).siblings('li').find('.wrap').css({display:'none'});
				$(this).find('.wrap').css({display:'block'});
			});
		</script>
	</body>
</html>

javascript竖向菜单,纵向菜单_第1张图片
javascript竖向菜单,纵向菜单_第2张图片

你可能感兴趣的:(javascript学习日记,javascript,jquery)