代码如下，已做注释。
点击(此处)折叠或打开
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
-
"">
-
<html>
-
<head>
-
<script src=""></script>
-
<link rel="stylesheet"
-
href=""
-
type="text/css" />
-
<link rel="stylesheet"
-
href=""
-
type="text/css" />
-
<script type="text/javascript"
-
src=""></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>