jquery创建树形目录

运行效果如下：

代码如下，已做注释。

点击(此处)折叠或打开

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet"
href="http://jquery.bassistance.de/treeview/demo/screen.css"
type="text/css" />
<link rel="stylesheet"
href="http://jquery.bassistance.de/treeview/jquery.treeview.css"
type="text/css" />
<script type="text/javascript"
src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>
<script>
$(document).ready(function() {
//id一定要放在span中，不能放在ul或li中，否则会让一块的颜色都变掉，如果想要在点击事件中做其它事情，重写$("span").click(function()函数就可以了
//基本思想是，树形目录的每一个id都不一样，对应数据库中的条目id，点击后，先获取被点击元素的id，然后根据id做其它相应的处理
$("#example").treeview();
$("span").click(function() {
//$("span.now").css("background-color", "");
//下面两语配合css实现选中的当前项变蓝色，但是怎么让背景变色，而不是让字体变色呢？
//同时这两语还可以获取上一次点击的项和当前项id，以便对点击做进一步处理
$("span.current").removeClass("current");
$(this).addClass("current");
})
});
</script>
<style type="text/css">
.filetree span.current {
color:blue;
background-color:green;
}
#outer {
width:300px;
border-style: solid;
border-width: 1px
}
</style>
</head>
<body>
<div id="outer">
<ul id="example" class="filetree">
<li><span id=1 class="folder">Folder 1</span>
<ul>
<li><span id=1.1 class="file">Item 1.1</span></li>
</ul></li>
<li><span id=2 class="folder">Folder 2</span>
<ul>
<li><span id=2.1 class="folder">Subfolder 2.1</span>
<ul>
<li><span id=2.1.1 class="file">File 2.1.1</span></li>
<li><span id=2.1.2 class="file">File 2.1.2</span></li>
</ul></li>
<li><span id=2.2 class="file">File 2.2</span></li>
</ul></li>
<li class="closed"><span id=3 class="folder">Folder 3
(closed at start)</span>
<ul>
<li><span id=3.1 class="file">File 3.1</span></li>
</ul></li>
<li><span id=4 class="file">File 4</span></li>
</ul>
</div>
</body>
</html>

cnljh

jquery创建树形目录