jQuery左侧二级菜单树

最新推荐文章于 2022-05-07 15:40:14 发布

卡洛斯阿勒

最新推荐文章于 2022-05-07 15:40:14 发布

阅读量530

点赞数

没办法，IE6的环境下，还是简单实用为上，

转载自http://www.veryhuo.com/a/view/41430.html

jQuery多级折叠(树形)菜单，动态展开和收缩。所有的元素以ul li ul li ul li的循环格式嵌套如果没有下级分类就用li a结束嵌套，代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级下拉菜单</title>
<script language="javascript" type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script>
<style type="text/css">
ul,li{
list-style:none;
font-size:12px;
line-height:20px;
width:80px;
margin:0;
padding-left:6px;
}
.child{
display:none;
}
.nav a{
display:block;
color:#5c84c1;
padding-left:22px;
}
</style>
<script language="javascript" type="text/javascript">
//说明 所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套
$(document).ready(function(){
//$(".nav ul li").children("ul").hide();
$(".nav").find("li").not(":has(ul)").children("a").css({textDecoration:"none",color:"#333",background:"none"})
.click(function(){
$(this).get(0).location.href="'"+$(this).attr("href")+"'";
});
$(".nav").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
.click(function(){
if($(this).next("ul").is(":hidden")){
$(this).next("ul").slideDown("slow");
if($(this).parent("li").siblings("li").children("ul").is(":visible")){
$(this).parent("li").siblings("li").find("ul").slideUp("1000");
$(this).parent("li").siblings("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
.end().find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});}
$(this).css({background:"url(images/statu_open.gif) no-repeat left top;"});
return false;
}else{
$(this).next("ul").slideUp("normal");
//不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏
$(this).css({background:"url(images/statu_close.gif) no-repeat left top;"});
$(this).next("ul").children("li").find("ul").fadeOut("normal");
$(this).next("ul").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});
return false;
}
});
});
</script>
</head>
<body>
烈火提示：点击下边的菜单试试，如果不能显示效果，请先刷新！
<div class="nav">
<ul>
<li>
<a href="#">一级菜单</a>
<ul class="child">
<li>
<a href="#">二级菜单</a>
</li>
<li>
<a href="#">二级菜单</a>
<ul class="child">
<li>
<a href="#">三级菜单</a>
</li>
<li>
<a href="#">三级菜单</a>
</li>
</ul>
</li>
<li>
<a href="#">二级菜单</a>
<ul class="child">
<li>
<a href="#">三级菜单</a>
</li>
<li>
<a href="#">三级菜单</a>
<ul class="child">
<li>
<a href="">四级菜单</a>
</li>
<li>
<a href="">四级菜单</a>
</li>
<li>
<a href="">四级菜单</a>
<ul class="child">
<li>
<a href="">五级菜单</a>
</li>
<li>
<a href="">五级菜单</a>
</li>
<li>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- 烈火網 liehuo.net 欢迎复制,拒绝恶意采集 ｌｉｅｈｕｏ．ｎｅｔ -->
<li>
<a href="#">一级菜单</a>
<ul class="child">
<li>
<a href="#">二级菜单</a>
</li>
<li>
<a href="#">二级菜单</a>
</li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul class="child">
<li>
<a href="#">二级菜单</a>
</li>
<li>
<a href="#">二级菜单</a>
</li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
</li>
</ul>
</div>
</body>
</html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

卡洛斯阿勒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery左侧二级菜单树

jQuery多级折叠(树形)菜单，动态展开和收缩。所有的元素以ul li ul li ul li的循环格式嵌套如果没有下级分类就用li a结束嵌套，代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏。　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
复制链接

扫一扫