$(function () {
$("a").each(function () {
$(this).click(function () {
//console.log($(this).parent().parent().html());
//if ($(this).attr("hasChild"))
//{}
var ch = $(this).parent().parent().parent().next();
if ($(ch).hasClass("tree_children")) {
$(ch).toggle();
}
if ($(ch).is(":hidden")) {
$(this).parent().parent().parent().find(".status").removeClass("open").addClass("close");
}
else {
$(this).parent().parent().parent().find(".status").removeClass("close").addClass("open");
}
//prev .siblings()
});
})
});
@charset "utf-8";
/*
Author：张浩华
Date：2011.11.25 0:12
Version：SimpleTree 1.0
*/
.treerow{ width:100%;}
.treerow:hover{ width:100%;background:#f2f2f2;}
.radiocss{float:left;}
.checkboxcss{float:left;}
.st_tree{
padding:10px;
}
/* 超链接 */
.st_tree a{
color:#222;
text-decoration:none;
}
/* 鼠标经过的超链接 */
.st_tree a:hover{
color:#f33;
text-decoration:underline;
}
/* 子菜单的父节点 */
.st_tree .folder{
background:url(imgs/st_folder.gif);
background-repeat:no-repeat;
/*! padding:0 0 0 20px; */
width: 20px;
height: 20px;
float: left;
}
/* 展开的父节点 */
.st_tree .open{
background:url(imgs/st_icon_open.png);
background-repeat:no-repeat;
width: 20px;
height: 20px;
float: left;
background-position: center;
}
.st_tree .close{
background:url(imgs/st_icon.png);
background-repeat:no-repeat;
width: 20px;
height: 20px;
float: left;
background-position: center;
}
.st_tree .file{
font-size:13px;
color:#222;
line-height:18px;
cursor:pointer;
list-style:none;
background:url(imgs/st_node.gif);
background-repeat:no-repeat;
float: left;
width: 20px;
height: 20px;
}
.st_tree .hover{
background-color:#ffa;
}
<!DOCTYPE html PUBdivC "-//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>
<title></title>
<script src="SimpleTree/jquery.js" type="text/javascript"></script>
<link href="SimpleTree/NBSimpleTree.css" rel="stylesheet" type="text/css" />
<script src="SimpleTree/NBSimpleTree.js" type="text/javascript"></script>
</head>
<body>
<div class="st_tree">
<div class="treerow"><div style="padding-left:0px;"><div class="textcss"></div><a href="#" ref="hyjm" haschild="false">欢迎界面</a></div></div>
<div class="treerow"><div style="padding-left:0px;"><div class="status open"></div><div class="folder"></div><div class="textcss"><a href="#" ref="xtgl" haschild="true">系统管理</a></div></div></div>
<div class="tree_children">
<div class="treerow"><div style="padding-left:18px;"><div class="file"></div><div class="textcss"><a href="#" ref="yhgl" haschild="false">用户管理</a></div></div></div>
<div class="treerow"><div style="padding-left:18px;"><div class="file"></div><div class="textcss"><a href="#" ref="rzck" haschild="false">日志查看</a></div></div></div>
</div>
<div class="treerow"><div style="padding-left:0px;"><div class="status open"></div><div class="folder"></div><div class="textcss"><a href="#" ref="ckgl" haschild="true">仓库管理</a></div></div></div>
<div class="tree_children">
<div class="treerow"><div style="padding-left:18px;"><div class="file"></div><div class="textcss"><a href="#" ref="kcgl" haschild="false">库存管理</a></div></div></div>
<div class="treerow"><div style="padding-left:18px;"><div class="file"></div><div class="textcss"><a href="#" ref="shgl" haschild="false">收货管理</a></div></div></div>
<div class="treerow"><div style="padding-left:18px;"><div class="status open"></div><div class="folder"></div><div class="textcss"><a href="#" ref="fhgl" haschild="true">发货管理</a></div></div></div>
<div class="tree_children">
<div class="treerow"><div style="padding-left:36px;" show="false"><div class="file"></div><div class="textcss"><a href="#" ref="yhgl" haschild="false">用户管理</a></div></div></div>
<div class="treerow"><div style="padding-left:36px;" show="false"><div class="file"></div><div class="textcss"><a href="#" ref="rzck" haschild="false">日志查看</a></div></div></div>
</div>
</div>
</div>
</body>
</html>