樹形目錄效果如下，點擊每個項可以折疊和展開子項。
代碼：
<!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>