html5做目录树,jquery实现的树形目录实例

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

Document

.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;

}

$(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();

});

});

• 一级目录1
• 一级目录2
  • 二级目录2.1
  • 二级目录2.2
• 一级目录3
  • 二级目录3.1
  • 二级目录3.2
  • 二级目录3.3
    • 三级目录3.3.1
    • 三级目录3.3.2

运行效果如下图所示：

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