本文實例講述了jquery實現的樹形目錄。分享給大家供大家參考。具體實現方法如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.st_tree ul li{ font-size:13px; color:#222; line-height:18px; cursor:pointer; list-style:none; background:url(st_folder.gif); background-repeat:no-repeat; padding:0 0 3px 20px;}</style></head><body><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script type="text/javascript">$(document).ready(function(){ $(".ul").hide();})$(document).ready(function(){ $("#li1").click(function() { $("#ul1").toggle(); });});$(document).ready(function(){ $("#li2").click(function() { $("#ul2").toggle(); });});$(document).ready(function(){ $("#li3").click(function() { $("#ul3").toggle(); });});</script><div class="st_tree"><ul> <li ><a href="#" >一級目錄1</a></li> <li id="li1"><a href="#" >一級目錄2</a></li> <ul show="true" id="ul1" class="ul"> <li ><a href="#" >二級目錄2.1</a></li> <li ><a href="#" >二級目錄2.2</a></li> </ul> <li id="li2"><a href="#" >一級目錄3</a></li> <ul id="ul2" class="ul"> <li ><a href="#" >二級目錄3.1</a></li> <li ><a href="#" >二級目錄3.2</a></li> <li id="li3"><a href="#" >二級目錄3.3</a></li> <ul id="ul3" class="ul"> <li ><a href="#" >三級目錄3.3.1</a></li> <li ><a href="#">三級目錄3.3.2</a></li> </ul> </ul></ul></div></body></html>運行效果如下圖所示：
希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
