Question

你好我正在尝试创建一个像菜单一样的树（有点像Windows中的文件浏览器）

我创建了＆＃34;树＆＃34;查看使用

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

怎么会让它像树一样行动？

提前谢谢

Answer 1

你制作了树视图的结构，但你需要定义它的样式或它在页面上的显示方式，这是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实现高级树视图的教程。

希望这会有所帮助。

构建树视图菜单

1 个答案: