目录树折叠菜单 (无限级) jquery版

admin 发表于 2014-11-12 09:07:55

目录树折叠菜单 (无限级) jquery版
本文关键字词：目录树，折叠菜单，目录树折叠菜单，jquery目录树，jquery折叠菜单

效果截图：

源码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>目录树折叠(无限级)</title>
<style type="text/css">
ul{list-style:none;padding:0;}
#menu .tree1{padding:14px 14px 14px 39px;color:#6F93FF;font-size:16px;font-family:"黑体";border-bottom:solid 1px #eee;}
#menu #tree_root{overflow:auto;}
#menu #tree_root li span{display:block;height:18px;line-height:18px;color:#222;cursor:pointer;}
#menu #tree_root li span.tree2{padding:6px 6px 6px 20px;}
#menu #tree_root li span.tree3{padding:6px 6px 6px 34px;}
#menu #tree_root li span.tree4{padding:6px 6px 6px 48px;}
#menu #tree_root li span.tree5{padding:6px 6px 6px 62px;}
#menu li .hover,#menu li span:hover{background-color:#e9edf6;}
#menu ul{overflow:hidden;}
#menu ul li b{font-weight:normal;position:relative;padding-left:16px;}
#menu ul li b:before{display:block;font-size:0;top:5px;left:0;content:"";width:4px;height:4px; border:solid 1px transparent;transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);position:absolute;}
#menu ul li .On:before,#menu ul li .On2Off:before{top:3px;border-bottom-color:#999;border-right-color:#999;}
#menu ul li .Off:before{top:5px;border-top-color:#999;border-right-color:#999;}
#menu ul li .On2Off:before{transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
</style>
</head>
<body>
<div id="menu">
<h1 class="tree1">文章模块</h1>
<ul id="tree_root">
<li>
一级分类
<ul style="display:none;">
<li>二级分类</li>
<li>二级分类</li>
<li>二级分类</li>
</ul>
</li>
<li>
一级分类
<ul style="display:none;">
<li>
二级分类
<ul style="display:none;">
<li>三级分类</li>
<li>三级分类</li>
<li>三级分类</li>
</ul>
</li>
<li>
二级分类
<ul style="display:none;">
<li>三级分类</li>
<li>三级分类</li>
<li>
三级分类
<ul style="display:none;">
<li>四级分类</li>
<li>四级分类</li>
<li>四级分类</li>
</ul>
</li>
</ul>
</li>
<li>二级分类</li>
<li>二级分类</li>
</ul>
</li>
<li>
一级分类
<ul style="display:none;">
<li>二级分类</li>
<li>二级分类</li>
<li>二级分类</li>
</ul>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//目录树折叠按钮 -------------------------------
function setTreeStyle(obj){
var objStyle = obj.children("b");
var objList = obj.siblings("ul");
if(objList.length == 1){
var style = objStyle.attr("class");
objStyle.attr("class","On2Off");
setTimeout(
function(){
if(style == "Off"){
objList.parent().siblings("li").children("span").children(".On").each(function(){
setTreeStyle($(this).parent());
});
var H = objList.innerHeight()
objList.css({display:"block",height:"0"});
objList.animate({height:H},300,function(){$(this).css({height:"auto"});});
objStyle.attr("class","On");
}
else if(style == "On"){
objList.find("li").children("span").children(".On").each(function(){
setTreeStyle($(this).parent());
});
var H = objList.innerHeight()
objList.animate({height:0},300,function(){$(this).css({height:"auto",display:"none"})});
objStyle.attr("class","Off");
}
},
42
);
}
}
$("#tree_root").find("li").children("span").click(function(){
setTreeStyle($(this));
});
// -----------------------------------------
})
</script>
</body>
</html>

页: [1]

PHPIN.NET's Archiver

目录树折叠菜单 (无限级) jquery版