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

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

2024-08-05 10:35:43   210人阅读


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折叠菜单</title>
		<script type="text/javascript" src=http://www.mamicode.com/"js/jquery-2.1.0.js"></script>>
$(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;
}



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


联系
我们