二级菜单究极版之自学js系列

最新推荐文章于 2021-03-02 14:45:10 发布

学习前端的一只旺财

最新推荐文章于 2021-03-02 14:45:10 发布

阅读量111

点赞数

分类专栏：自学js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46972646/article/details/110376712

版权

自学js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="UTF-8">
	<title>二级菜单</title>
	<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, "新宋体";
		}
	</style>

	<link rel="stylesheet" type="text/css" href="./sdmenu.css" />
	
	<script src="./tools.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var menuSpan = document.querySelectorAll(".menuSpan");
            var opendiv  =  menuSpan[0].parentNode;
            for(var i=0; i<menuSpan.length; i++){
            menuSpan[i].onclick=function(){
				var parentdiv = this.parentNode ;
					/* var begin = parentdiv.offsetHeight;
						toggleClass(parentdiv,"collapsed");
							 var end = parentdiv.offsetHeight;
							 	parentdiv.style.height= begin + "px";//将初始值给height高度，即move只需找target即可。
								 move(parentdiv, end,10,"height", function(){
									parentdiv.style.height="";	//  若不写这句，则一直单击span会使得div一直点一直加height
								 }); */
								 
					//此处管展开的动画效果。
					toggleMenu(parentdiv);
					
					if(opendiv != parentdiv  && !hasClass(opendiv , "collapsed")){
						toggleMenu(opendiv);
						//此处管缩回的动画效果。
						//代码是对的，注意位置，重新创建一个。
					//本为add，只需要添加，不需要移出（此时是有class才移出），因此移出时直接不进if,均换好变动画效果。
							}
				opendiv=parentdiv;
            };
			}
			
			/*
			 * 用来切换菜单折叠和显示状态
			 */
     function toggleMenu(obj){
		var begin = obj.offsetHeight;
		toggleClass(obj,"collapsed");
		var end = obj.offsetHeight;
		obj.style.height = begin + "px";//将初始值给height高度，即move只需找target即可。
		move(obj,"height",end,10,function(){
		obj.style.height="";	//  若不写这句，则一直单击span会使得div一直点一直加height
						 });
		
	}
			
		};
		
		
	</script>
	
</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="#">JavaScript工具包</a>
			<a href="#">CSS驱动</a>
			<a href="#">CodingForums</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>

学习前端的一只旺财

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级菜单究极版之自学js系列

<head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-decoration: none; } body { font: 12px..
复制链接

扫一扫