二级菜单自己做（究极版后看这个深入理解版）之自学js系列

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

<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" />
</head>
<script src="./tools(js工具箱).js"></script>
<script>
	window.onload=function(){
			//明确目标：
			// 1.为了实现单击span使对应的div进行缩放操作，有多个span。
			// 因考虑兼容性，通过query方式获取span，并通过for循环为span绑定单击响应函数（若对spanb父元素div绑定，则点其子元素也缩放）
			// 绑定单击响应函数后，实现缩放效果，通过添加 删除 menuSpan类实现缩放效果，通过toggleClass函数实现效果（因此需要span对应div）。

			// 2.为了实现每次单击新的span时，会将原先打开的div关闭，即每次仅有一个span所对应div展开。
			// 因此需要知道之前展开的是哪个div（即为opendiv），并将此div缩回，并将opendiv立马进行实时更新。

			// 3.为了适应动画切换效果，将原有addclass变为toggleclass，在if上做限制。

			// 4.对动画切换效果进行操作。首先获取现有初始值，切换完成后获取结束值，将div的高度设置为初始值，通过move函数实现动画效果
			// 由于此时div高度设置时采用了内联样式，优先级比样式表高，因此切换时会出现问题，所以在动画结束时(即为回调函数中)将其删除（变为空串）
		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, end,10,"height", function(){
		obj.style.height="";	//  若不写这句，则一直单击span会使得div一直点一直加height
						 });
		
	}
	//  1.获取其span所对应的DIV，对其DIV进行操作，对div添加类实现展开和缩回效果。
    // removeClass(parentDIV,"collapsed");	仅能实现将callapsed类删除，将div展开的效果，再次点击不能实现缩回效果。
     //  addClass(parentDIV,"collapsed");  仅能实现将callapsed类添加，将div缩回的效果，再次点击不能实现展开效果。
     //————————————————————————————————————————————————————————————————————————————————————————————————————————————————
            //因此想一种实现能够自动切换和展开效果的操作 ---------------借助togger
     //————————————————————————————————————————————————————————————————————————————————————————————————————————————————
     //即可实现使得DIV自动切换collapsed类，实现展开的回缩，回缩的展开的效果。



     //  2.实现每次仅能展开一个DIV，打开新的旧的缩回的效果，因此要知道现在打开的是哪个div。
     //  即一定为之前的div添加collapsed类，即可缩回,每次使得opendiv更新为最新的，即为当前切换效果的div(即为随时更新变动的parentdiv)。
     /* if(opendiv != parentDIV) *///注意此刻为不等于，不是等于，脑瓜子飘了
	 /* addClass(opendiv,"collapsed"); */
	 /* if(openDIV != parentDIV  && !hasClass(openDIV , "collapsed")){ */
						//打开菜单以后，应该关闭之前打开的菜单
						//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
						//addClass(openDiv , "collapsed");
						//此处toggleClass()不需要有移除的功能
						//toggleClass(openDiv , "collapsed");
						//切换菜单的显示状态
						/* toggleMenu(openDIV); */
						//确保每次只有一个di显示。
				/* 	openDIV = parentDIV; */

     //即第一次循环时opendiv与parentdiv一样，均为第一个div，然后opendiv=parentdiv，仍为第一个，此时i++，parentdiv变成第二个，即当前看的是第二个div，
    //对第二个div进行toggle操作，此时opendiv还是第一个div，对第一个div实行addclass操作，添加collapsed类，第一个div缩回.
    //即达到第一个div缩回，第二个div展开的效果,然后将parentdiv赋给opendiv(opendiv = parentDIV;)所以此时opendiv为第二个div,单击第三个span
    //如此循环,每次opendiv必将比parentdiv小,实现只打开一个的效果(而又因为parentDIV=this.paretnode
    //因此可以实现(默认第一个展开时)单击第四个,第一个缩回的效果.)

//---------------------------------------------------------------------------------------------------------------------------------------
// 当重复单击span时,第一个所在的div默认展开，再次单击第一个span，第一个所在div缩回，再次单击第一个span时失效。
// 为何此时不生效？如分析第一个
//1.第一个div默认展开，此时单击span，执行toggle，div由展开到缩回（正常），然后执行opendiv = parentdiv。
//2.再次单击span时，由于opendiv与parentdiv相同均为第一个div，然后toggle使第一个div由缩回到展开。
//3.addclass又为div添加collapsed类，使第一个div由展开到缩回与最初一样，相当于没动。

              /* 因此要解决这种情况，就要加条件：opendiv不等于parentdiv时，才能实现addclass； 
                     不能为toggleclass添加限制，tgooleclass正常使用，该管管，改开开  */

// 本来有(因为是关闭的),切换,没了,展开,在此添加,又有了, 与最初一样,因此不生效.

	}
	
</script>

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