一. 原生javascript实现简单的树状导航

1. 效果图

2. 实现代码

核心思想：一种特殊形式的“折叠菜单”，开发思想几乎一样！

二. 利用jQuery treeview_无限分类树插件

1. 效果图

2. 实现代码

<link rel="stylesheet" href="./jQuery treeview_files/jquery.treeview.css">

<link rel="stylesheet" href="./jQuery treeview_files/screen.css">

<script src="./jQuery treeview_files/jquery.js" type="text/javascript"></script>

<script src="./jQuery treeview_files/jquery.cookie.js" type="text/javascript"></script>

<script src="./jQuery treeview_files/jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript" src="./jQuery treeview_files/demo.js"></script>

<h4>Sample 1 - default</h4>

<ul id="browser" class="filetree treeview">

<li>

<div class="hitarea collapsable-hitarea"></div>

<span class="folder">Folder 1</span>

<ul>

<li><span class="file">Item 1.1</span></li>

</ul>

</li>

<li>

<div class="hitarea collapsable-hitarea"></div>

<span class="folder">Folder 2</span>

<ul>

<li>

<div class="hitarea collapsable-hitarea"></div>

<span class="folder">Subfolder 2.1</span>

<ul>

<li><span class="file">File 2.1.1</span></li>

<li><span class="file">File 2.1.2</span></li>

</ul>

</li>

<li><span class="file">File 2.2</span></li>

</ul>

</li>

</ul>