BootWiki教程网
源代码：
点击运行
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery Treeview 插件 - 基本</title> <link href="https://www.bootwiki.com/assets/jquery-treeview/jquery.treeview.css" rel="stylesheet" /> <link href="https://www.bootwiki.com/assets/jquery-treeview/demo/screen.css" rel="stylesheet" /> <script src="//cdn.staticfile.net/jquery/2.1.4/jquery.min.js"></script> <script src="https://www.bootwiki.com/assets/jquery-treeview/demo/jquery.cookie.js" type="text/javascript"></script> <script src="https://www.bootwiki.com/assets/jquery-treeview/jquery.treeview.js" type="text/javascript"></script> <script src="https://www.bootwiki.com/assets/jquery-treeview/demo/demo.js" type="text/javascript"></script> </head> <body> <h1 id="banner">jQuery Treeview 插件 - 基本</h1> <div id="main"> <h4>实例 1 - 默认</h4> <ul class="filetree" id="browser"> <li><span class="folder">Folder 1</span> <ul> <li><span class="file">Item 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="file">File 2.2</span></li> </ul> </li> <li class="closed"><span class="folder">Folder 3（开始时是关闭的）</span> <ul> <li><span class="file">File 3.1</span></li> </ul> </li> <li><span class="file">File 4</span></li> </ul> <h4>实例 2 - 导航</h4> <ul id="navigation"> <li><a href="?1">Item 1</a> <ul> <li><a href="?1.0">Item 1.0</a> <ul> <li><a href="?1.0.0">Item 1.0.0</a></li> </ul> </li> <li><a href="?1.1">Item 1.1</a></li> <li><a href="?1.2">Item 1.2</a> <ul> <li><a href="?1.2.0">Item 1.2.0</a> <ul> <li><a href="?1.2.0.0">Item 1.2.0.0</a></li> <li><a href="?1.2.0.1">Item 1.2.0.1</a></li> <li><a href="?1.2.0.2">Item 1.2.0.2</a></li> </ul> </li> <li><a href="?1.2.1">Item 1.2.1</a> <ul> <li><a href="?1.2.1.0">Item 1.2.1.0</a></li> </ul> </li> <li><a href="?1.2.2">Item 1.2.2</a> <ul> <li><a href="?1.2.2.0">Item 1.2.2.0</a></li> <li><a href="?1.2.2.1">Item 1.2.2.1</a></li> <li><a href="?1.2.2.2">Item 1.2.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="?2">Item 2</a> <ul> <li><span>Item 2.0</span> <ul> <li><a href="?2.0.0">Item 2.0.0</a> <ul> <li><a href="?2.0.0.0">Item 2.0.0.0</a></li> <li><a href="?2.0.0.1">Item 2.0.0.1</a></li> </ul> </li> </ul> </li> <li><a href="?2.1">Item 2.1</a> <ul> <li><a href="?2.1.0">Item 2.1.0</a> <ul> <li><a href="?2.1.0.0">Item 2.1.0.0</a></li> </ul> </li> <li><a href="?2.1.1">Item 2.1.1</a> <ul> <li><a href="?2.1.1.0abc">Item 2.1.1.0</a></li> <li><a href="?2.1.1.1">Item 2.1.1.1</a></li> <li><a href="?2.1.1.2">Item 2.1.1.2</a></li> </ul> </li> <li><a href="?2.1.2">Item 2.1.2</a> <ul> <li><a href="?2.1.2.0">Item 2.1.2.0</a></li> <li><a href="?2.1.2.1">Item 2.1.2.1</a></li> <li><a href="?2.1.2.2">Item 2.1.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="?3">Item 3</a> <ul> <li class="open"><a href="?3.0">Item 3.0</a> <ul> <li><a href="?3.0.0">Item 3.0.0</a></li> <li><a href="?3.0.1">Item 3.0.1</a> <ul> <li><a href="?3.0.1.0">Item 3.0.1.0</a></li> <li><a href="?3.0.1.1">Item 3.0.1.1</a></li> </ul> </li> <li><a href="?3.0.2">Item 3.0.2</a> <ul> <li><a href="?3.0.2.0">Item 3.0.2.0</a></li> <li><a href="?3.0.2.1">Item 3.0.2.1</a></li> <li><a href="?3.0.2.2">Item 3.0.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <h4>实例 3 - 快速动画，所有的树枝在开始时都是折叠的，红色的主题，基于 cookie 的持久性</h4> <ul class="treeview-red" id="red"> <li><span>Item 1</span> <ul> <li><span>Item 1.0</span> <ul> <li><span>Item 1.0.0</span></li> </ul> </li> <li><span>Item 1.1</span></li> <li><span>Item 1.2</span> <ul> <li><span>Item 1.2.0</span> <ul> <li><span>Item 1.2.0.0</span></li> <li><span>Item 1.2.0.1</span></li> <li><span>Item 1.2.0.2</span></li> </ul> </li> <li><span>Item 1.2.1</span> <ul> <li><span>Item 1.2.1.0</span></li> </ul> </li> <li><span>Item 1.2.2</span> <ul> <li><span>Item 1.2.2.0</span></li> <li><span>Item 1.2.2.1</span></li> <li><span>Item 1.2.2.2</span></li> </ul> </li> </ul> </li> </ul> </li> <li><span>Item 2</span> <ul> <li><span>Item 2.0</span> <ul> <li><span>Item 2.0.0</span> <ul> <li><span>Item 2.0.0.0</span></li> <li><span>Item 2.0.0.1</span></li> </ul> </li> </ul> </li> <li><span>Item 2.1</span> <ul> <li><span>Item 2.1.0</span> <ul> <li><span>Item 2.1.0.0</span></li> </ul> </li> <li><span>Item 2.1.1</span> <ul> <li><span>Item 2.1.1.0</span></li> <li><span>Item 2.1.1.1</span></li> <li><span>Item 2.1.1.2</span></li> </ul> </li> <li><span>Item 2.1.2</span> <ul> <li><span>Item 2.1.2.0</span></li> <li><span>Item 2.1.2.1</span></li> <li><span>Item 2.1.2.2</span></li> </ul> </li> </ul> </li> </ul> </li> <li class="open"><span>Item 3</span> <ul> <li class="open"><span>Item 3.0</span> <ul> <li><span>Item 3.0.0</span></li> <li><span>Item 3.0.1</span> <ul> <li><span>Item 3.0.1.0</span></li> <li><span>Item 3.0.1.1</span></li> </ul> </li> <li><span>Item 3.0.2</span> <ul> <li><span>Item 3.0.2.0</span></li> <li><span>Item 3.0.2.1</span></li> <li><span>Item 3.0.2.2</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> <h4>实例 4 - 带有控制的树，黑色和灰色的主题，基于 cookie 的持久性</h4> <div id="treecontrol"> <a href="#" title="折叠下面的树"><img src="https://www.bootwiki.com/assets/jquery-treeview/images/minus.gif" /> 折叠全部</a> <a href="#" title="展开下面的树"><img src="https://www.bootwiki.com/assets/jquery-treeview/images/plus.gif" /> 展开全部</a> <a href="#" title="切换下面的树，打开已关闭的树枝，关闭已打开的树枝">切换全部</a> </div> <ul class="treeview-black" id="black"> <li>Item 1</li> <li> <span>Item 2</span> <ul> <li> <span>Item 2.1</span> <ul> <li>Item 2.1.1</li> <li>Item 2.1.2</li> </ul> </li> <li>Item 2.2</li> <li class="closed"> <span>Item 2.3（开始时是关闭的）</span> <ul> <li>Item 2.3.1</li> <li>Item 2.3.2</li> </ul> </li> </ul> </li> </ul> <ul class="treeview-gray" id="gray"> <li>Item 1</li> <li> <span>Item 2</span> <ul> <li class="closed"> <span>Item 2.1（开始时是关闭的）</span> <ul> <li>Item 2.1.1</li> <li>Item 2.1.2</li> </ul> </li> <li>Item 2.2.1</li> <li>Item 2.2.2</li> <li>Item 2.2.3</li> <li>Item 2.2.4</li> <li>Item 2.2.5</li> <li>Item 2.2.6</li> <li>Item 2.2.7</li> <li>Item 2.2.8</li> <li> <span>Item 2.3</span> <ul> <li>Item 2.3.1</li> <li>Item 2.3.2</li> <li>Item 2.3.3</li> <li>Item 2.3.4</li> <li>Item 2.3.5</li> <li>Item 2.3.6</li> <li>Item 2.3.7</li> <li>Item 2.3.8</li> <li>Item 2.3.9</li> </ul> </li> <li> <span>Item 2.4</span> <ul> <li>Item 2.4.1</li> <li>Item 2.4.2</li> <li>Item 2.4.3</li> <li>Item 2.4.4</li> <li>Item 2.4.5</li> <li>Item 2.4.6</li> <li>Item 2.4.7</li> <li>Item 2.4.8</li> <li>Item 2.4.9</li> </ul> </li> </ul> </li> <li>Item 3</li> </ul> </div> </body> </html>
运行结果