jquery 实现多级悬浮菜单-前端撸码笔记

好不容易编的样式，领导一否决就要全部删掉了。领导可以不珍惜我们的劳动，我们自己要珍惜，所以我把这段代码贴出来，写的不好的地方大家多担待。

//jquery代码：

$(document).ready(function(){

$(“.orderleft”).children(“li”).children(“a”).click(function() { //点击一级菜单功能

if (!$(this).parent().hasClass(“subli”)) {

$(this).parent().addClass(“hover”);//点击添加样式

$(this).parent().siblings().removeClass(“hover”);//删除其他一级菜单样式

$(“.subhover”).removeClass(“subhover”);//移除所有子菜单样式

$(this).parent().parent().find(“.” + $(this).parent().attr(“dataid”)).toggle(100);//点击打开或关闭对应的子菜单

$(this).parent().parent().find(“li:not(.”+$(this).parent().attr(“dataid”)+”)”).hide();//其他不相关子菜单隐藏

$(this).parent().parent().find(“li:not(.subli)”).show();显示上一行误隐藏的一级菜单
}

});
$(“.orderleft”).children(“li”).children(“a”).mouseover(function() { //一级菜单鼠标经过功能
if (!$(this).parent().hasClass(“subli”)) {
$(“.subhover”).removeClass(“subhover”);
}
$(“.subsub”).find(“li”).css(“background-color”,””);
$(“.orderleft .subli”).find(“.subsub”).css({“width”: “0px”});//收起之前展开的子菜单
$(“.orderleft .subli”).find(“.subsub”).hide();

});

$(“.subsub”).children(“li”).children(“a”).mouseover(function() {//子菜单鼠标经过功能原理同上只是代码没有整合其实这一段应该写成模块的
$(this).next().find(“li”).css(“background-color”,””);
$(this).next().find(“.subsub”).css({“width”: “0px”});
$(this).next().find(“.subsub”).hide();

});

$(“.orderleft .subli”).mouseover(function() { //鼠标经过一级菜单时显示出子菜单
$(this).children(“a”).parent().siblings().children().removeClass(“subhover”);
$(this).children(“a”).addClass(“subhover”);
$(this).siblings().find(“.subsub”).css({“width”: “0px”});//收起之前展开的子菜单
$(this).siblings().find(“.subsub”).hide();//隐藏之前展开的子菜单

if ($(this).children(“.subsub”).width() != null) {//如果包含子菜单
var thistop = $(this).offset().top;//获取当前菜单的位置
var thisleft = $(this).offset().left;
$(this).children(“.subsub”).show();//子菜单显示
$(this).children(“.subsub”).css({//子菜单移到相应的位置
“margin-top”: thistop + “px”,
“margin-left”: (thisleft + 140) + “px”
});
if ($(this).children(“.subsub”).width() == 0) {//判断子菜单是否处于展开状态，如果没展开，则执行以下代码
var thisobj = $(this).get(0);//jquery对象转变成dom对象，以便传参详情：http://web.zhaicool.net/226.html
timeout = setTimeout(function() {//延时
tanchu(thisobj);//鼠标停上500毫秒后展开子菜单
},
500);

function tanchu(obj) {//展开子菜单函数这个函数应该拿出来用的也应该写成模块只是领导让舍弃这种特效，我又不想半途而废，于是就随手往上写了想到啥写啥。。。其实面向过程的编程思路就是潇洒~~~
$(obj).children(“.subsub”).animate({// animate 动态效果，达到横向展开特效，特效时长150毫秒
width: 140
},
150)
}
}

}
});

$(“.subsub li”).mouseover(function() { //子菜单展开特效跟一级菜单展开特效基本相同
var bgcolor=$(this).parent().css(“background-color”);//获取上一级菜单的背景色
bgcolor=bgcolor.replace(/rgb/, “”);
bgcolor=bgcolor.replace(/$/, “”);
bgcolor=bgcolor.replace(/$/, “”);
var bgcolorArr = bgcolor.split(“,”);
var bgcolorR = Number(bgcolorArr[0]);
var bgcolorG = Number(bgcolorArr[1]);
var bgcolorB = Number(bgcolorArr[2]); //以上代码将rgb（）颜色里的数字提取出来
var newbgcolor=””;
if((bgcolorB-250)>=0){//自己随便编的一些规则，根据这些规则来生成子菜单的颜色，做到子菜单与当前菜单背景色不同，显出层次感。因为不确定到底有几级子菜单，所以没办法为每个菜单指定背景色，所以采用动态生成背景色的方法
newbgcolor=”rgb(“+bgcolorR+”,”+bgcolorG+”,”+(bgcolorB-250)+”)”;//新生成的背景色
}else{
if((bgcolorG+100)<255){
newbgcolor=”rgb(“+(bgcolorR+100)+”,”+(bgcolorG+50)+”,”+bgcolorB+”)”;
}else{
if((bgcolorG+200)<=255){
newbgcolor=”rgb(“+bgcolorR+”,”+(bgcolorG+200)+”,”+bgcolorB+”)”;
}else{
if(bgcolorR+100<150){
newbgcolor=”rgb(“+(bgcolorR+100)+”,”+(bgcolorG-100)+”,”+bgcolorB+”)”;
}
else{
newbgcolor=”rgb(14,152,148)”;
}
}
}

}
$(this).siblings().find(“.subsub”).css({“width”: “0px”});//将之前展开的子菜单收起
$(this).siblings().css(“background-color”,””);将之前展开的子菜单动态添加的背景色删除

$(this).siblings().find(“.subsub”).hide(); //将之前展开的子菜单隐藏以上三步其实就是初始化子菜单，应该写成模块保存
$(this).css({
“background-color”:newbgcolor
});//鼠标经过时给当前菜单添加新的背景色

if ($(this).children(“.subsub”).width() != null) { //判断当前菜单是否有子菜单
var thisleft = $(this).parent().offset().left;
$(this).children(“.subsub”).show();
$(this).children(“.subsub”).css({
“margin-top”: (thistop) + “px”,
“margin-left”: (thisleft + 141) + “px”,
“background-color”:newbgcolor
});//确定子菜单位置以及添加新的背景色
if ($(this).children(“.subsub”).width() == 0) { //判断子菜单是否处于展开状态，如果没展开，则执行以下代码
var thisobj = $(this).get(0);//jquery dom 对象转换
timeout = setTimeout(function() {
tanchu(thisobj);
},
500);

function tanchu(obj) {
$(obj).children(“.subsub”).animate({
width: 140
},
150)
}
}

}
});

$(“#ifr”).on(“load”,function(){//在空白处点击收起子菜单因为当前网页的空白处是iframe内容，所以用到了jquery对iframe的操作详情：http://web.zhaicool.net/228.html
$(window.frames[“ifr”].document).find(“body”).click(function(){

$(window.parent.document).find(“.subsub”).css({“width”: “0px”});
$(window.parent.document).find(“.subsub”).hide();
$(window.parent.document).find(“.subsub”).find(“li”).css(“background-color”,””);

});

//部分html代码

<li class=”subli bumen”>
<a href=”javascript:void();”>信息数据中心</a>
<ul class=”subsub”>
<li><a href=”javascript:void();”>信息安全部</a>
<ul class=”subsub”>
<li><a href=”javascript:void();”>子部门1</a>
<ul class=”subsub”>
<li><a href=”javascript:void();”>子部门3</a>
<ul class=”subsub”>
<li><a href=”javascript:void();”>子部门s</a></li>
<li><a href=”javascript:void();”>子部门e</a></li>
</ul>
</li>
<li><a href=”javascript:void();”>子部门4</a></li>
</ul>
</li>
<li><a href=”javascript:void();”>子部门2</a></li>
</ul>
</li>
<li><a href=”javascript:void();”>数据分析部</a>
<ul class=”subsub”>
<li><a href=”javascript:void();”>子部门5</a>
<ul class=”subsub”>
<li><a href=”javascript:void();”>子部门7</a></li>
<li><a href=”javascript:void();”>子部门8</a></li>
</ul>
</li>
<li><a href=”javascript:void();”>子部门6</a></li>
</ul>
</li>
</ul>
</li>
<li class=”subli bumen”><a href=”javascript:void();” style=”font-weight:bold; color:#f00″>新增部门</a></li>
<li dataid=”yuangong”><a href=”javascript:void();”>员工管理</a></li>
<li class=”subli yuangong”><a href=”javascript:void();” style=”font-weight:bold; color:#f00″>新增员工</a></li>
</ul>
//部分css代码

.list_left .orderleft .subli{display:none;border-bottom: #ccc 1px dashed; padding-left:0}
.list_left .orderleft .subli a{
text-align:left;
padding-left:10px;
}
.list_left .orderleft .subli .subhover{
background-color:#09F;
color:#FFF;

}

.list_left .orderleft .subsub{
z-index:10000;
position:fixed;
width:0px;
height:auto;
top:0;
left:0;
background-color:#09f;
overflow:hidden;
display:none;

}
.list_left .orderleft .subsub li{
width:100%;
height:30px;
display:block;
border-bottom:1px #CCCCCC dashed;
white-spacing:nowrap;
cursor:pointer;
background-color:transparent;
margin-top:0;
}
.list_left .orderleft .subsub li a{
color:#FFF;
padding-left:15px;
}

未经允许不得转载：前端撸码笔记 » jquery 实现多级悬浮菜单

内容推荐