原创JavaScript Jquery特效之----多重特效折叠菜单(附带详细注释和算法思路)
浏览数：17 /
时间：2015年06月08日
<!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;
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
