树形目录效果如下，点击每个项可以折叠和展开子项。
代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> ul li ul { display:none; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script> $(document).ready(function(e) { $("ul li").click(function(e) { $(this).children("ul").toggle(); e.stopPropagation(); //阻止冒泡事件 }); }); </script> </head> <body> <ul> <li>目录1 <ul> <li>目录1.1 <ul> <li>目录1.1.1</li> <li>目录1.1.2</li> </ul> </li> <li>目录1.2 <ul> <li>目录1.2.1</li> <li>目录1.2.2</li> <li>目录1.2.3</li> </ul> </li> <li>目录1.3 <ul> <li>目录1.3.1</li> <li>目录1.3.2</li> <li>目录1.3.3</li> </ul> </li> </ul> </li> <li>目录2 <ul> <li>目录2.1</li> <li>目录2.2</li> <li>目录2.3</li> </ul> </li> <li>目录3 <ul> <li>目录3.1</li> <li>目录3.2</li> <li>目录3.3</li> </ul> </li> </ul> </body> </html>