构建树视图菜单

-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

构建树视图菜单

回答

相关问题