jquery treeview 插件用于把一个无序列表改为一个可扩展的可折叠的树,有利于导航。该插件支持位置和基于 cookie 的持久性。
该插件目前版本是 1.4.1,以后将会整合成为 jquery ui 的一部分。
访问 jquery treeview 官网,下载 jquery treeview 插件。
另外,还有很多可替代 treeview 的 jquery 树插件,比如 jstree。
学完本教程,建议您进行jquery实战练习来巩固您刚学到的新知识
在使用jquery treeview之前,html文档中需要包含jquery.js、jquery.treeview.js、jquery.treeview.css几个文件,你可以从官网下载。
<ul id="browser" class="filetree treeview-famfamfam">
<li><span class="folder">folder 1</span>
<ul>
<li><span class="folder">item 1.1</span>
<ul>
<li><span class="file">item 1.1.1</span></li>
</ul>
</li>
<li><span class="folder">folder 2</span>
<ul>
<li><span class="folder">subfolder 2.1</span>
<ul id="folder21">
<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="folder">subfolder 2.2</span>
<ul>
<li><span class="file">file 2.2.1</span></li>
<li><span class="file">file 2.2.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><span class="folder">folder 3 (closed at start)</span>
<ul>
<li><span class="file">file 3.1</span></li>
</ul>
</li>
<li><span class="file">file 4</span></li>
</ul>
</li>
</ul>