垂直手风琴5级菜单！用js+jquery动态加载菜单，附上源码hezhu和注释
1.做了几天，终于做完了，原理也理解透彻了。注释加上了。数据结构则是1导航菜单2二级菜单:XX管理,XX报告,XX分析,查询3三级菜单:XX登记XX注销XX查询XX移交4四级菜单：XX查询，XX查询5五级菜单即有链接可以点击显示右边页面的。从数据库读出已经是菜单的结构顺序了，但是每个菜单均带有自己的等级。先看效果：
左边是4级菜单的第一个，右边是5级菜单的第二个；同级别菜单点开是会自动收缩其他已经展开的菜单的。
2.附上jsp代码
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
3.附上js代码
/**
* Created by Administrator on 2016/8/23.
*/
var left={}
$(function(){
//打开左边菜单栏
left.openMenu();
left.openThirdMenu();
left.openForthMenu();
//打开三级菜单
left.OpenthMenu();
//中间内容
$(".tab tr td").click(function(){
$(".tab tr td").removeClass("add");
$(this).addClass("add");
});
$("#button1").click(function(){
$(this).css("background","#E35558");
$(this).css("color","#ffffff");
});
$("#button2").removeClass("add_btn");
$(".butt input").click(function(){
$(".butt input").removeClass("add_btn");
$(this).addClass("add_btn");
});
$(".nav_menu").click(function(){
left.closeLeft();
});
$("#Tabbar").css('width',$(window).width()-200);
//选项卡
left.addRemoveTabs();
left.refreshTab();
});
//关闭时效果——展开
left.openLeft = function(){
if($('.left').css('display') == 'none'){
$('.sidebar').css('display', 'none');
$('#sidebar').css('width','200px');
$('.left').css('display', 'block');
$("#bar").css('width',$(window).width()-100);
$("#bar").css('left',140);
$(".center").css('width',$(window).width()-200);
$(".center").css('left',140);
}
};
//折叠已展开菜单--------------------没用
left.closeLeft = function(){
if($('.sidebar').css('display') == 'none'){
$('#sidebar').css('width','60px');
$('.left').css('display', 'none');
$('.sidebar').css('display', 'block');
$("#Tabbar").css("left",60);
$("#bar").css('width',$(window).width()-60);
$(".center").css('width',$(window).width()-60);
$(".center").css('left',0);
$("#bar").css('left',0);
}
};
//展开时效果——展开折叠的二级菜单
left.openMenu = function(){
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var links = this.el.find('.div2');
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
};
/*显示下层窗口*/
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this);
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');//上级元素后面的图标呈打开状态，再点就收起
if (!e.data.multiple) {
$el.find('.div3').not($next).slideUp().parent().removeClass('open');
}
};
var div1 = new Accordion($('.left-menu'), false);
};
left.openThirdMenu = function(){
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var links = this.el.find('.thirdMe');
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this);//本点击按钮3级菜单li
$next = $this.next();//本点击按钮3级菜单下面的4级菜单span
$this.toggleClass('openThird');//加上openThird样式即图标旋转
$next.slideToggle();//折叠span
if (!e.data.multiple) {
$el.find('.div4').not($next).slideUp();//所有的div4,除了本点击按钮3级菜单下面的4级菜单span，都收起
$el.find('.div4').prev().not($this).removeClass('openThird');//所有的div4的上一级（即li）,不包括本点击按钮3级菜单li,移除openThird样式
}
};
var div1 = new Accordion($('.div3'), false);//div3不折叠
};
//展开时四级菜单
left.openForthMenu = function(){
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var links = this.el.find('.forthMe');
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this);//本点击按钮4级菜单li
$next = $this.next();//本点击按钮4级菜单下面的5级菜单label
$next.slideToggle();//折叠label
$this.toggleClass('openForth');//加上openForth样式即图标旋转
if (!e.data.multiple) {
//所有的div5,除了本点击按钮4级菜单下面的5级菜单label，都收起
$el.find('.div5').not($next).slideUp();//.parent().removeClass('openForth');
$el.find('.div5').prev().not($this).removeClass('openForth');//所有的div5的上一级（即li）,不包括本点击按钮3级菜单li,移除openThird样式
}
};
var div1 = new Accordion($('.div4'), false);
}
////折叠时的三级菜单
left.OpenthMenu = function(){
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
this.el.find('.link').on('click', {
el: this.el,
multiple: this.multiple
}, this.dropdown);
}
Accordion.prototype.dropdown = function(e) {
alert("OpenthMenu");
var $el = e.data.el;
$(this).next().slideToggle();
$(this).parent().toggleClass('openth');
if (!e.data.multiple) {
$el.find('.th-menu').not($(this).next()).slideUp().parent().removeClass('openth');
}
};
var accordion = new Accordion($('.sub-menu'), false);
};
//选项卡
left.addRemoveTabs = function(){
$(".sub-menu li a").click(function(){
var aName = $(this).attr("rel");
//显示隐藏close小图标
$("#bar li a.remove").hide();
$("#" + aName + "_close").show();
//iframe内容
$(".center iframe").hide();
$("#" + aName + "_content").show();
//当前选项卡样式
$("#bar li").removeClass("current");
$("#" + aName).parent().addClass('current');
//调用添加选项卡函数
//left.addTab($(this));
});
//点击3、4级菜单执行方法
$(".div3 li a").click(function(){
var aName = $(this).attr("rel");
//显示隐藏close小图标
$("#bar li a.remove").hide();
$("#" + aName + "_close").show();
//iframe内容
$(".center iframe").hide();
$("#" + aName + "_content").show();
//当前选项卡样式
$("#bar li").removeClass("current");
$("#" + aName).parent().addClass('current');
//调用添加选项卡函数
//获取a标签src函数，并去空格
var src=$.trim($(this).attr('src'));
//非空
if(src!=""&&src!=null){
//调用添加选项卡函数
left.addTab($(this));
}
});
$('#bar').on('click','a.Currtab',function(){
//获取tab名
var contentname = $(this).attr("id") + "_content";
//console.log(contentname);
//隐藏其他所有tabs
$(".center iframe").hide();
$("#bar li").removeClass('current');
var closename = $(this).attr("id") + "_close";
$("#bar li a.remove").hide();
$("#"+closename).show();
//显示当前tab
$("#" + contentname).show();
$(this).parent().addClass('current');
});
$("#bar").on('click','a.remove',function(){
//获取tab的id
var tabid = $(this).parent().find(".Currtab").attr("id");
//移除tab和相关内容
var contentname = tabid + "_content";
//console.log(contentname);
$("#" + contentname).remove();
$(this).parent().remove();
// if there is no current tab and if there are still tabs left, show the first one
if ($("#bar li.current").length == 0 && $("#bar li").length > 0) {
var firsttab = $("#bar li:last-child");// 查找第一个tab
firsttab.addClass("current");
var firsttabid = $(firsttab).find("a.Currtab").attr("id");// 获取第一个tab的名字和内容
$("#" + firsttabid + "_content").show();
$("#" + firsttabid + "_close").show();
}
left.refreshTab();
});
};
//添加选项卡
left.addTab = function(link){
//console.log( $(link).attr("src"));
var Src = $(link).attr("src");
//若tab已经存在，则不会重复请求
if($('#' + $(link).attr('rel')).length != 0){
//$(".center iframe").attr('src',Src);
// left.refreshTab();
return;
}
//隐藏其他的tabs
$('#bar li').removeClass('current');
$(".center iframe").hide();
//添加一个新的选项卡
$("#bar").append("" + $(link).html() +
""+"
");
$(".center").append('');
// 设置新添加的选项卡为当前tab
$("#bar li a.remove").hide();
$("#"+$(link).attr("rel") + "_close").show();
$("#" + $(link).attr("rel") + "_content").show();
//console.log($("#bar li").width());
left.refreshTab();
};
left.refreshTab = function(){
//获取一个右边区域的宽度
var gWidth = $("#Tabbar").width();
//console.log(gWidth);
//选项栏宽度
var uWidth = 100;
$("#bar li").each(function(){
//console.log($(this).width());
uWidth += $(this).width() +11;
});
//console.log(uWidth);
if(uWidth >0 )
$("#bar").css("width", uWidth);
if(uWidth >= gWidth){
$(".left-btn-div").show();
$(".right-btn-div").show();
left.minLeft = gWidth - uWidth-20;
$("#bar").css("left", left.minLeft);
}else{
$(".left-btn-div").hide();
$(".right-btn-div").hide();
$("#bar").css("left",0);
}
};
//选项栏想左移动
left.moveLeft = function(){
var lcss = $("#bar").css("left");
lcss = parseInt(lcss.substring(0,lcss.length -2));
if(lcss < 20){
lcss = lcss + 100;
if(lcss > 20) lcss = 20;
$("#bar").css("left",lcss);
}
};
//选项栏想右移动
left.moveRight = function(){
var lcss = $("#bar").css("left");
lcss = parseInt(lcss.substring(0,lcss.length -2));
if(lcss > left.minLeft){
lcss = lcss - 100;
if(lcss < left.minLeft) lcss = left.minLeft;
$("#bar").css("left",lcss);
}
};
//禁用鼠标右键
document.οncοntextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");4.附上css样式
* {
margin:0;padding:0;list-style-type:none;
}
body{
overflow-y: hidden;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*闁兼寧绮屽畷鐔虹箔椤戣法顏卞☉鎿冧簻濞存﹢寮介敓锟�*/
.sidebar h1 {
height: 45px;
line-height: 40px;
cursor: pointer;
color: #FFF;
font: 16px Open Sans;
border-bottom: 1px solid #CFCFCF;
padding-left: 10px;
padding-top: 12px;
margin: 0;
}
h1>i.fa.fa-bars {
padding: 10px;
}
h1 a{
text-decoration: none;
}
/*濞戞挻妲掕ぐ宥夊础閿燂拷*/
.sidebar {
width: 60px;
height: 100%;
position: fixed;
border-right: 1px solid #CFCFCF;
}
/*濞戞搫鎷锋鍥嚕濠婂啫绀嬮柡宥呭槻缁憋拷*/
.sidebar li {
list-style: none;
padding: 10px 10px 10px 20px;
position: relative;
border-bottom: 1px solid #CFCFCF;
}
/*.main-menu{*/
/*list-style: none;*/
/*padding: 0;*/
/*background: #6E9CD6;*/
/*}*/
.main-menu li a {
text-decoration: none;
color: #ffffff;
font: 14px Open Sans;
position: relative;
z-index: 1000;
}
.sub-menu li a {
text-decoration: none;
color: #000000;
font: 14px Open Sans;
position: relative;
z-index: 1000;
}
/*濞存粌鐬兼鍥嚕濠婂啫绀嬮柡宥呭槻缁憋拷*/
.sub-menu {
position: absolute;
left: 62px;
top: 0;
padding: 0;
width: 120px;
display: none;
text-align: left;
}
.sub-menu li.firstMe,.sub-menu li.firstMe a{
font-size: 14px;
font-weight: bold;
height: 20px;
}
.sub-menu li.link{
font-size: 13px;
}
li.link:hover {
cursor: pointer;
}
.sub-menu li:first-child{
width: 92px;
margin-left: -2px;
}
.sub-menu div.th-li li:first-child{
width: 90px;
margin-left: 0;
}
.sub-menu li a {
font-size: 13px;
}
.main-menu li:hover ul.sub-menu {
display: block;
}
.main-menu li:hover ul.sub-menu .th-menu{
display: none;
}
/*濞戞挸顦芥鍥嚕濠婂啫绀嬮悘鐐存礀缁辨垿寮崼鐔轰函*/
ul.sub-menu li i.fa-chevron-down{
font-size: 12px;
color: #ffffff;
margin-left: 25px;
}
ul.sub-menu div.openth li.link a{
color: #ffffff;
}
ul.sub-menu div.openth li i{
color: #ffffff;
}
ul.sub-menu div.openth li i.fa-chevron-down{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
div.th-menu ul li {
padding-left: 20px;
}
div.th-menu ul li a {
margin-left: 12px;
color: #000000;
}
div.th-menu ul li a:hover {
color: #ffffff;
}
.th-menu ul li,.th-menu ul li:first-child{
background: #F1F1F2;
}
.th-menu ul li:first-child{
width: 90px;
margin-left: 0;
}
/*濞存粌鐬兼鍥嚕濠婂啫锟�*/
.left{
border-right:1px solid #C6C6C6 ;
width:200px;
height:100%;
font-size:14px;
text-align:center;
position:fixed;
background-color:#EFEFEF;
}
.left a{
text-decoration: none;
}
.left-menu{
list-style: none;
padding: 0;
width: 200px;
}
.left div div{
list-style: none;
}
.left-menu .first-one{
border-top: 1px solid #CCCCCC;
}
.div2{
height:40px;
line-height:40px;
cursor:pointer;
font-size:13px;
position:relative;
border-bottom:#CCCCCC 1px solid;
color:#ffffff;
}
.div2 p{
position: absolute;
left:50px;
}
.div2 p a{
color: #ffffff;
}
.jbsz {position:absolute;left:20px; top:12px; top:0px\9;}
.nav_menu{
width: 200px;
height: 40px;
line-height: 40px;
cursor: pointer;
font-size: 13px;
position: relative;
color:#ffffff;
z-index: 20;
border-bottom: #CCCCCC 1px solid;
}
.nav_menu p{
padding-top:1px;
font-weight: bold;
font-size: 16px;
position: absolute;
left:50px;
}
.div3{
display:none;
font-size:13px;
position: relative;
z-index: 10;
}
.div3 li{
border-bottom:1px solid #E1E1E1;
line-height:30px;
list-style:none;
text-align:left;
cursor: hand;
}
.div3 li a{
text-decoration: none;
outline: none;
position: relative;
color:black;
left:50px;
width: 182px;
display: inline-block;
}
.div3 ul li a:hover{
text-decoration: none;
color: #ffffff;
}
.left_top i{
position: absolute;
top:12px;
left:20px;
font-size:18px;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.left_top i.fa-angle-left{
right:25px;
left: auto;
font-size:18px;
}
.div2 i{
font-size:13px;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.div2 i.fa-chevron-down{
position: absolute;
right:22px;
left: auto;
top:12px;
font-size:12px;
}
/*濞戞挸顦芥鍥嚕濠婂啫锟�*/
.div4{
display:none;
font-size:13px;
position: relative;
z-index: 10;
width: 230px;
}
.div4 li{
border-bottom:1px solid #E1E1E1;
line-height:30px;
list-style:none;
text-align:left;
cursor: hand;
}
.div4 li a{
text-decoration: none;
outline: none;
position: relative;
left:70px;
/* width: 282px; */
display: inline-block;
}
.div4 ul li a:hover{
text-decoration: none;
color: #ffffff;
}
.div5{
display:none;
font-size:13px;
position: relative;
z-index: 10;
}
.div5 li{
border-bottom:1px solid #E1E1E1;
line-height:30px;
list-style:none;
text-align:left;
cursor: hand;
}
.div5 li a{
text-decoration: none;
outline: none;
position: relative;
font-weight:100 !important;
left:65px;
width: 182px;
display: inline-block;
}
.div5 ul li a:hover{
text-decoration: none;
color: #ffffff;
}
/* .div4 li{
border-bottom:1px solid #E1E1E1;
line-height:30px;
list-style:none;
text-align:left;
cursor: hand;
}
.div4 li a{
text-decoration: none;
outline: none;
position: relative;
color:black;
left:50px;
width: 182px;
display: inline-block;
}
.div4 ul li a:hover{
text-decoration: none;
color: #ffffff;
} */
.thirdMe{
cursor: pointer;
/* padding-left: 49px; */
}
.thirdMe i{
position: relative;
/* left:99px; */
font-weight: bolder;
color: black;
}
ul.thirdMenu {
margin-left: -32px;
}
.thirdMenu ul li a{
position: relative;
left: 62px;
}
.special i{
position: relative;
left:34px;
}
.special1 i{
position: relative;
left:47px;
}
.special-inno i{
position: relative;
left:72px;
}
/*闁搞儳鍋撻悥锝夊籍鐎ｎ厽锟�*/
.left-menu div.open .div2{
color:#ffffff;
}
.left-menu div.open i.fa.fa-chevron-down{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotateI {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*濞戞挸顦芥鍥嚕濠婂啫锟�*/
.thirdMenu li.openThird a{
color:black;
}
.thirdMenu li.openThird i.fa.fa-angle-down{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.thirdMenu li.openForth a{
color:black;
}
.thirdMenu li.openForth i.fa.fa-angle-down{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);}
/*闂侇偄顧侀妴宥夊础閿燂拷*/
#Tabbar{
height: 40px;
position: fixed;
z-index: -1;
top: 0;
left: 200px;
}
#bar{
height: 40px;
position: absolute;
top: 0;
left: 0px;
margin:0;
padding:0;
list-style:none;
}
#bar li {
float: left;
display: block;
padding: 14px 5px 0 5px;
text-align: center;
height: 40px; /*濞ｅ浂鍠楅弫绯眣闁兼枼鍓濆鏇熺▔閿燂拷*/
width: auto;
}
#bar li a {
color:#F6F2F4;
text-decoration:none;
font-size: 13px;
font-weight: bold;
margin-left: 5px;
}
/*鐟滅増鎸告晶鐘绘焻婢舵劑锟介柛妤嬫嫹*/
#bar li.current a {
color:#ffffff;
text-decoration:none;
margin-left:10px;
}
#bar li a.remove {
color:#ffffff;
margin-left:10px;
}
a.remove img {
width: 9px;
border: none;
}
.center{
width: 100%;
position: absolute;
top: 40px;
}
.center p {
padding:20px 20px 100px 20px;
background: #fff;
margin: 15px;
}
.center iframe{
width:100%;
height: 678px;
}
.left-btn-div{
position:absolute;
height: 40px;
z-index:1;
background:#6E9CD6;
}
/*闁告帞锟�锟斤拷宸剏闁肩绱曢獮澶嬬▔閿燂拷*/
.left-btn-div a{
color:white;
font-weight:700;
font-size:18px;
text-decoration: none;
/* margin-top: 21px; */
display: block;
}
end
*/
/*濠⒀呭仜婵拷?y闁肩绱曢獮澶嬬▔閿燂拷*/
.left-btn-div a {
color: white;
font-weight: 700;
font-size: 12px;
text-decoration: none;
display: block;
width: 25px;
height: 40px;
padding: 12px 4px;
background: transparent;
}
/*end*/
.right-btn-div{
position:absolute;
background:#6E9CD6;
z-index:1;
height: 40px;/*濞ｅ浂鍠楅弫绯眣闁肩绱曢獮澶嬬▔閿燂拷*/
right:0;
}
/*闁告帞锟�锟斤拷宸剏闁肩绱曢獮澶嬬▔閿燂拷*/
.right-btn-div a{
color:white;
font-weight:700;
font-size:18px;
text-decoration: none;
/* margin-top: 21px; */
display: block;
}
end
*/
/*濠⒀呭仜婵拷?y闁肩绱曢獮澶嬬▔閿燂拷*/
.right-btn-div a {
color: white;
font-weight: 700;
font-size: 12px;
text-decoration: none;
display: block;
width: 25px;
height: 40px;
padding: 12px 4px;
background: transparent;
}
.left-btn-div a.btn,.right-btn-div a.btn{
border-radius: 0px;
}
.left-btn-div a.btn-default:hover,.left-btn-div a.btn-default:link,.left-btn-div a.btn-default:visited,.left-btn-div a.btn-default:active {
background-color: #6E9CD6;
}
.right-btn-div a.btn-default:hover,.right-btn-div a.btn-default:link,.right-btn-div a.btn-default:visited,.right-btn-div a.btn-default:active {
background-color: #6E9CD6;
}
/*end*/5.最后附上贴图
