原创JavaScript Jquery特效之----多重特效折叠菜单(附带详细注释和算法思路)

最新推荐文章于 2024-03-16 15:59:07 发布

足境

最新推荐文章于 2024-03-16 15:59:07 发布

阅读量1.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Im_KK/article/details/41643979

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折叠菜单</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/foldMenu.js" ></script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			#FoldingMenuBar {
				margin: 200px;;
			}
			li {
				list-style: none;
			}
			.left {
				float: left;
			}
			.TotalMenu {
				float: left;
			}
			.TotalMenu li{
				height: auto;
				overflow:auto;
			}
			.menuBody{
				position: relative;
				display: none;
			}
			.ulMenuBody{
				float:left;
				width: 220px;
			}
			.ulMenuBody{
				display: none;
				position: relative;
			}
			.ulMenuBody li{
				width: 220px;
				height: 34px;
				background: white;
				border-top: 1px solid #ccc;
				line-height: 34px;
				text-indent: 50px;
			}
			.ulMenuBody li:hover{
				background:#0099FF;
			}
			.menuHeader{
				height: 35px;
				width: 220px;
				background:#DA0A0A;
				line-height: 34px;
				cursor: pointer;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<div id="FoldingMenuBar">
			<ul class="TotalMenu">
				<li class="firstMenu">
					<div class="menuHeader">
						<span>第一期</span>
					</div>
					<div class="menuBody">
						<ul class="ulMenuBody">
							<li><a href="#">公司名称11</a></li>
							<li><a href="#">公司名称11</a></li>
							<li><a href="#">公司名称11</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
						<ul class="ulMenuBody">
							<li><a href="#">公司名称12</a></li>
							<li><a href="#">公司名称12</a></li>
							<li><a href="#">公司名称12</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
						<ul class="ulMenuBody">
							<li><a href="#">公司名称13</a></li>
							<li><a href="#">公司名称13</a></li>
							<li><a href="#">公司名称13</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
						<ul class="ulMenuBody">
							<li><a href="#">公司名称14</a></li>
							<li><a href="#">公司名称14</a></li>
							<li><a href="#">公司名称14</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
					</div>
				</li>
				<li class="secondMenu">
					<div class="menuHeader">
						<span>第二期</span>
					</div>
					<div class="menuBody">
						<ul class="ulMenuBody">
							<li><a href="#">公司名称21</a></li>
							<li><a href="#">公司名称21</a></li>
							<li><a href="#">公司名称21</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
						<ul class="ulMenuBody">
							<li><a href="#">公司名称22</a></li>
							<li><a href="#">公司名称22</a></li>
							<li><a href="#">公司名称22</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
					</div>
				</li>
				<li class="thirdMenu">
					<div class="menuHeader">
						<span>第三期</span>
					</div>
					<div class="menuBody">
						<ul class="ulMenuBody">
							<li><a href="#">公司名称31</a></li>
							<li><a href="#">公司名称31</a></li>
							<li><a href="#">公司名称31</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
						<ul class="ulMenuBody">
							<li><a href="#">公司名称32</a></li>
							<li><a href="#">公司名称32</a></li>
							<li><a href="#">公司名称32</a></li>
							<li><button class="PreviousPage">上一页</button>
								<button class="NextPage">下一页</button>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		<div id="divTemp">
			调试输出
		</div>
	</body>
</html>

$(document).ready(function () {
	//一个menuHeader下方有一个menuBody
	var menuHeader=$(".menuHeader");
	var menuBody=$(".menuBody");
	var divTemp=document.getElementById("divTemp");
	var moveTime=300;
	var globalMoveLock=false;//全局动画锁
	menuHeader.each(function(i){
		$(this).click(function(){
			if($(menuBody[i]).css("display") == "block"){
				$(menuBody[i]).slideUp(300);
			}
			else{
				//遍历所有menuBody并且关闭所有menuBody,再打开当前menuBody
				menuBody.each(function(i){
					if($(this).css("display") == "block"){
						$(this).slideUp(300);
					}
				});
				//显示点击项(先查看menuBody[i].children是否全部隐藏,是则显示其中一项)
				var flag=false;
				$(menuBody[i].children).each(function(){
					if($(this).css("display") == "none" && $(this).css("opacity")=="1"){
						flag=true;
					}
					else{
						//本段代码似乎不可能执行到....
						flag=false;
					}
				});
				if(flag==true){
					//当menuBody[i].children全部不可见时,显示第一项
					$(menuBody[i].children[0]).css("display","block");
				}
				$(menuBody[i]).slideDown(300);
			}
		});
	});
	//获取所有上一页按钮按钮,下一页按钮
	var preBtns=$(".PreviousPage");
	var nexBtns=$(".NextPage");
	//所有上一页按钮
	preBtns.each(function(){
		$(this).click(function(){
			//$(this.parentNode.parentNode).animate({right:'220px'});
			//先获取点击区域的MenuBody,和该区域的所有ulMenuBody
			var menuBodys=this.parentNode.parentNode.parentNode;
			var ulMenuBodys=menuBodys.children
			var index=-1;
			//判断哪一个ulMenuBody是可见的,可见的即代表是当前的ulMenuBody,并记录下标
			$(ulMenuBodys).each(function(i){
				//下行判断必须用!=0而不是==1(因为需要动画执行完毕才==1)
				if($(this).css("opacity") != "0"){
					index=i;
					return false;
				}
			});
			//alert(index);
			if(ulMenuBodys[index-1]!=undefined){
				//点击上一页,整体向右动,当前块需要隐藏同时透明度设置为0,动画停止后最后透明度设置为1
				//$(ulMenuBodys[index+1]).css("display","block");
				$(menuBodys).animate({right:"-=220px"},moveTime);
				$(ulMenuBodys[index]).animate({opacity:"0"},moveTime,function(){
					$(ulMenuBodys[index]).css("opacity","1").css("display","none");
				});
			    $(ulMenuBodys[index-1]).animate({opacity:"1"},moveTime);
			}
		})
	});
	//所有下一页按钮
	nexBtns.each(function(){
		$(this).click(function(){
			//$(this.parentNode.parentNode).animate({right:'220px'});
			//先获取点击区域的MenuBody,和该区域的所有ulMenuBody
			var menuBodys=this.parentNode.parentNode.parentNode;
			var ulMenuBodys=menuBodys.children
			var index=-1;
			//判断哪一个ulMenuBody是可见的,可见的即代表是当前的ulMenuBody,并记录下标
			$(ulMenuBodys).each(function(i){
				//下行判断必须用!=0而不是==1(因为需要动画执行完毕才==1)
				if($(this).css("opacity") != "0"){
					index=i;
					//divTemp.innerHTML="index="+index;
					return false;
				}
			});
			if(ulMenuBodys[index+1]!=undefined && globalMoveLock==false){
				//moveLock();
				//先设置成可见,透明度为0,再慢慢将透明度提高到1
				$(ulMenuBodys[index+1]).css("display","block")
				.css("opacity","0")
				.animate({opacity:"1"},moveTime);
				$(menuBodys).animate({right:"+=220px"},moveTime);
			    $(ulMenuBodys[index]).animate({opacity:"0"},moveTime);
			    //divTemp.innerHTML+="index="+index;
			}
		})
	});
});

function moveUnLock()
{
	globalMoveLock=false;
}
function moveLock()
{
	globalMoveLock=true;
}