jquery实现的树形目录实例

本文实例讲述了jquery实现的树形目录。分享给大家供大家参考。具体实现方法如下：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title document/title style=' text/CSS ' .ST _ tree ul Li { font-size :13 px；颜色： # 222行高：18 px光标：指针指针；列表式：无；后台： URL(ST _ folder。gif)；背景-重复：不重复；padd :0 0 3px 20px }/style/head dyscript src=' http :http://代码。jquery。com/jquery-1。11 .3 .量滴js '/script脚本类型=' text/JavaScript ' $(文档).ready(function(){ $(')).ul ').hide()；})$(文档)。ready(function(){ $('#li1 ')).单击(函数(){ $('#ul1 ')).toggle()；});});$(文档)。ready(function(){ $('#li2 ')).单击(函数(){ $('#ul2 ')).toggle()；});});$(文档)。ready(function(){ $('#li ')).单击(function() { $('#ul3 ').toggle()；});});/script div=' ST _ tree ' ul阿利一级目录1/a/li li id='li1'a href='# '一级目录2/a/Li ul show=' true ' id=' ul1 ' class=' ul '阿利href='# '二级目录2.1/a/li阿利二级目录2.2/a/li /ul li id='li2'a href='# '一级目录3/a/li ul id='ul2' class='ul '阿利二级目录3.1/a/li阿利二级目录3.2/a/Li Li id=' Li ' a href=' # '二级目录3.3/a/li ul id='ul3' class='ul '阿利三级目录3.3.1阿利三级目录3 .3 .2/a/Li/ul/ul/div/body/html运行效果如下图所示：

希望本文所述对大家的jquery程序设计有所帮助。