jquery實現的樹形目錄實例

2019-11-20 12:08:48

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>

運行效果如下圖所示：