構建樹視圖菜單

-1

你好，我想創建一個樹狀菜單（有點像Windows中的文件資源管理器）構建樹視圖菜單

我已創建使用

<ul> and <li>

，但我的「樹」視圖不知道如何創建的展開和摺疊像文件瀏覽器

這部分是創建我的樹環路

 for($i=0, $n=count($cats); $i<$n; $i++){ 
      if($levels[$cats[$i]->level] == 0) 
      { 
       $tmp_html .= '<ul>'; 
       $levels[$cats[$i]->level] = 1; 
      } 
      $tmp_html .= '<a href="index.php/component/users/?view=students&links=4&s='.$cats[$i]->value.'">'; 
      $tmp_html .= '<li>'.$cats[$i]->text.'</li>'; 
      $tmp_html .= '</a>'; 
      if(($i<$n-1)&&($cats[$i]->level>$cats[$i+1]->level)){ 
       $tmp_level = $cats[$i]->level - $cats[$i+1]->level; 
       for($j=0; $j<$tmp_level; $j++){ 
        $tmp_html .= '</ul>'; 
        $levels[$cats[$i-$j]->level] = 0; 
       } 
      } 
     }

怎麼會給它樹一樣的動作？

預先感謝您

來源

2011-12-04 Dvir Levy

你讓你的樹狀的結構，但你需要定義它的風格或者如何將網頁上顯示，這是CSS的工作，所以你只要需要玩的CSS，首先你得給你的ul和li ID，如：

<ul class="TreeView" id="TreeView"> 
    <li class="Collapsed"> First level 1 node 
     <!-- level 2 nodes --> 
     <ul> 
     <li>First level 2 node</li> 
     <li>Second level 2 node</li> 
     </ul> 
    </li> 
</ul>

然後添加以下的風格，使你的名單，只要你想：

.TreeView LI 
{ 
    padding: 0 0 0 18px; 
    float: left; 
    width: 100%; 
    list-style: none; 
} 
LI.Expanded 
{ 
    // 
} 
LI.Expanded ul 
{ 
    display: block; 
} 
LI.Collapsed 
{ 
    // 
} 
LI.Collapsed ul 
{ 
    display: none; 
}

這個例子只是一個簡單的兩級樹視圖，點是Display屬性，它使子級可見:Block或合作:none。這只是Simple CSS Based Treeview。如果你在網上搜索了一下，你會發現許多關於如何使用Css，JavaScript和jQuery實現高級樹視圖的教程，如This。

希望這會有所幫助。

來源

2011-12-04 18:30:24

構建樹視圖菜單

回答

相關問題