master

分支 (1)

管理

管理

master

javascript_daily_practise
/
practise18.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级菜单</title>
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">工具包</a>
				<a href="#">css驱动</a>
				<a href="#">css例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current  or not</a>
				<a href="#">Current  or not</a>
				<a href="#">Current  or not</a>
				<a href="#">Current  or not</a>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 每一个菜单都是一个div，具有collapsed类时折叠
	// 点击菜单切换显示状态
	var menuSpan =document.getElementsByClassName("menuSpan")

	// 定义一个变量保存当前打开的菜单
	var opendiv = menuSpan[0].parentNode
	for(var i = 0;i<menuSpan.length;i++){
		menuSpan[i].onclick = function(){
			// 获取当前span的父元素
			var parentdiv = this.parentNode

			// 切换菜单的显示状态
			togglemenu(parentdiv);

			// 判断opendiv和parentdiv是否相同
			if(opendiv != parentdiv && !hasClass(opendiv,"collasped")){
				// 打开菜单后关闭之前打开的菜单
				// 采用toggleClass在做动画效果时可以统一处理
				// toggleClass(opendiv,"collapsed")
				togglemenu(opendiv)
			}
			opendiv = parentdiv
		};
	}

	// 切换菜单折叠状态
	function togglemenu(obj){
		// 在切换类之前，获取元素的高度
		var begin = obj.offsetHeight;

		toggleClass(obj,"collapsed")

		// 切换类之后获取一个高度
		var end = obj.offsetHeight

		// console.log(begin+" "+end)
		// 为实现动画效果，将元素高度重置为begin
		obj.style.height = begin + "px"
		move(obj,"height",end,5,function(){
			// 动画执行完后内联样式失去意义
			obj.style.height = null
		});
	}
</script>
<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	a,img{
		border: 0;
		text-decoration: none;
	}
	body{
		font: 12px/180% Arial, Helvetica, sans-serif;
	}
	div.sdmenu{
		width: 9.375rem;
		margin: 0 auto;
		font-family: "arial, helvetica, sans-serif";
		font-size: 0.75rem;
		padding-bottom: 0.625rem;
		background-color: #1477fe;
		color: #FFFFFF;
		border-radius: 0.625rem;
	}
	div.sdmenu div{
		background-color: #1477fe;
		overflow: hidden;
	}
	div.sdmenu div:first-child{
	}
	div.sdmenu div.collapsed{
		height: 1.5625rem;
	}
	div.sdmenu div span{
		display: block;
		height: 0.9375rem;
		line-height: 0.9375rem;
		overflow: hidden;
		padding: 0.3125rem 1.5625rem;
		font-weight: bold;
		color: white;
		cursor: pointer;
		border-bottom: 1px solid #e4e4e4;
	}
	div.sdmenu div a{
		display: block;
		border-bottom: 1px solid #e4e4e4;
		padding: 0.3125rem;
		color: #576b95;
		background-color: #F5F5F5;
	}
	div.sdmenu div a:hover{
		background-color: #576b95;
		color: #FFFFFF;
	}
</style>