TreeView即树形视图。TreeView一般被布置在页面的侧边栏位置，并可折叠收缩。
以下用两个示例来展示TreeView形式的网站导航功能。
一、普通TreeView
原理：通过设定上层节点中特定元素的鼠标单击触发事件，对下层子节点进行显示样式更改。
实现步骤：
1.获取需要响应鼠标单击事件的上层节点元素对象。
2.对鼠标单击事件进行加工，修改子节点样式。
<script type="text/javascript" src="jslib/jquery-1.8.3.js"></script>
<script type="text/javascript" >
$(document).ready(
function(){
$(".pe_u_thumb_list").children("img").toggle(
/*对父节点中的图片元素设定触发事件*/
function(){ /*鼠标单击图片奇数次时隐藏下层节点*/
$(this).parent().next("ul").hide();
},
function(){/*鼠标单击图片偶数次时展开下层节点*/
$(this).parent().next("ul").show();
}
);<!--end of toggle-->
}
);
</script>
<style type="text/css">
ul { list-style:none; }
</style>
</head>
<body>
<ul>
<li class="pe_u_thumb_list"><img src="p_w_picpaths/listicon.jpg" /><a href="#">CSS</a></li>
<ul>
<li>级联样式</li>
<li>统一设定标记元素样式</li>
</ul>
<li class="pe_u_thumb_list"><img src="p_w_picpaths/listicon.jpg"/><a href="#">Javascript</a></li>
<ul>
<li>网页前端脚本语言</li>
<li>对事件响应实现网页动态效果</li>
</ul>
</ul>
</body>
效果如下所示：
二、加入淡入淡出效果的TreeView
实现步骤：
1.取得要显示的节点对象，并在其上定义单击事件
2.在单击事件中取得后续标记元素对象整体，并在其上加入切换显示状态动画。
代码中用到的部分函数或方法：
1.jQuery遍历——nextAll()方法，该方法获得匹配元素集合中每个元素的所有跟随的同胞元素，
语法：.nextAll(selector)
2.jQuery效果——toggle()方法，该方法切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
语法：$(selector).toggle(speed,callback,switch)
代码如下：
<script type="text/javascript">
$(document).ready(
function(){
var main = $("ul > a"); <!--">"为CSS子元素选择器-->
main.click(function(){
var sub = $(this);
var item = sub.nextAll("li");/*取得代表TreeView所有子节点的元素对象*/
item.toggle("slow");/*修改子节点显示状态*/
});
}
);
</script>
<style>
ul { list-style:none;}
</style>
</head>
<body>
<ul><a href="#"><strong>西安邮电大学</strong></a>
<li><img src="p_w_picpaths/listicon.jpg" /><a href="http://www.xupt.edu.cn">计算机学院</a></li>
<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">通信与信息工程学院</a></li>
<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">电子工程学院</a></li>
</ul>
<ul><a href="#"><strong>陕西师范大学</strong></a>
<li><img src="p_w_picpaths/listicon.jpg" /><a href="http://www.snnu.edu.cn">计算机科学学院</a></li>
<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">历史文化学院</a></li>
<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">外国语学院</a></li>
</ul>
</body>
效果如下：
点击“西安邮电大学”几个字，下面的学院信息被隐藏：
