首页>>Jquery文字>>jquery 多级树形 可折叠的树形菜单(2014-07-09)

jquery 多级树形 可折叠的树形菜单

jquery 多级树形 可折叠的树形菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="tree well">  
  2. <ul>  
  3.     <li>  
  4.         <span><i class="icon-folder-open"></i> Parent</span> <a href="">Goes somewhere</a>  
  5.         <ul>  
  6.             <li>  
  7.                 <span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>  
  8.                 <ul>  
  9.                     <li>  
  10.                         <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>  
  11.                     </li>  
  12.                 </ul>  
  13.             </li>  
  14.             <li>  
  15.                 <span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>  
  16.                 <ul>  
  17.                     <li>  
  18.                         <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>  
  19.                     </li>  
  20.                     <li>  
  21.                         <span><i class="icon-minus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a>  
  22.                         <ul>  
  23.                             <li>  
  24.                                 <span><i class="icon-minus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a>  
  25.                                 <ul>  
  26.                                     <li>  
  27.                                         <span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>  
  28.                                     </li>  
  29.                                     <li>  
  30.                                         <span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>  
  31.                                     </li>  
  32.                                  </ul>  
  33.                             </li>  
  34.                             <li>  
  35.                                 <span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>  
  36.                             </li>  
  37.                             <li>  
  38.                                 <span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>  
  39.                             </li>  
  40.                         </ul>  
  41.                     </li>  
  42.                     <li>  
  43.                         <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>  
  44.                     </li>  
  45.                 </ul>  
  46.             </li>  
  47.         </ul>  
  48.     </li>  
  49.     <li>  
  50.         <span><i class="icon-folder-open"></i> Parent2</span> <a href="">Goes somewhere</a>  
  51.         <ul>  
  52.             <li>  
  53.                 <span><i class="icon-leaf"></i> Child</span> <a href="">Goes somewhere</a>  
  54.             </li>  
  55.         </ul>  
  56.     </li>  
  57. </ul>  
  58. </div>  
  59.   
  60. <div class="tree">  
  61.     <ul>  
  62.         <li>  
  63.             <span><i class="icon-calendar"></i> 2013, Week 2</span>  
  64.             <ul>  
  65.                 <li>  
  66.                     <span class="badge badge-success"><i class="icon-minus-sign"></i> Monday, January 7: 8.00 hours</span>  
  67.                     <ul>  
  68.                         <li>  
  69.                             <a href=""><span><i class="icon-time"></i> 8.00</span> – Changed CSS to accomodate...</a>  
  70.                         </li>  
  71.                     </ul>  
  72.                 </li>  
  73.                 <li>  
  74.                     <span class="badge badge-success"><i class="icon-minus-sign"></i> Tuesday, January 8: 8.00 hours</span>  
  75.                     <ul>  
  76.                         <li>  
  77.                             <span><i class="icon-time"></i> 6.00</span> – <a href="">Altered code...</a>  
  78.                         </li>  
  79.                         <li>  
  80.                             <span><i class="icon-time"></i> 2.00</span> – <a href="">Simplified our approach to...</a>  
  81.                         </li>  
  82.                     </ul>  
  83.                 </li>  
  84.                 <li>  
  85.                     <span class="badge badge-warning"><i class="icon-minus-sign"></i> Wednesday, January 9: 6.00 hours</span>  
  86.                     <ul>  
  87.                         <li>  
  88.                             <a href=""><span><i class="icon-time"></i> 3.00</span> – Fixed bug caused by...</a>  
  89.                         </li>  
  90.                         <li>  
  91.                             <a href=""><span><i class="icon-time"></i> 3.00</span> – Comitting latest code to Git...</a>  
  92.                         </li>  
  93.                     </ul>  
  94.                 </li>  
  95.                 <li>  
  96.                     <span class="badge badge-important"><i class="icon-minus-sign"></i> Wednesday, January 9: 4.00 hours</span>  
  97.                     <ul>  
  98.                         <li>  
  99.                             <a href=""><span><i class="icon-time"></i> 2.00</span> – Create component that...</a>  
  100.                         </li>  
  101.                     </ul>  
  102.                 </li>  
  103.             </ul>  
  104.         </li>  
  105.         <li>  
  106.             <span><i class="icon-calendar"></i> 2013, Week 3</span>  
  107.             <ul>  
  108.                 <li>  
  109.                     <span class="badge badge-success"><i class="icon-minus-sign"></i> Monday, January 14: 8.00 hours</span>  
  110.                     <ul>  
  111.                         <li>  
  112.                             <span><i class="icon-time"></i> 7.75</span> – <a href="">Writing documentation...</a>  
  113.                         </li>  
  114.                         <li>  
  115.                             <span><i class="icon-time"></i> 0.25</span> – <a href="">Reverting code back to...</a>  
  116.                         </li>  
  117.                     </ul>  
  118.                 </li>  
  119.             </ul>  
  120.         </li>  
  121.     </ul>  
  122. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_372.html