построить древовидное меню

Question

Здравствуйте, я пытаюсь создать древовидное меню (вроде как файловый менеджер в 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;
                }
            }
        }

как бы ему было дано действие, подобное дереву?

Заранее спасибо

Answer 1

Вы создали структуру своего древовидного представления, но вам нужно определить его стиль или то, как он будет отображаться на странице, и это работа CSS, поэтому вам просто нужно поэкспериментировать с Css, сначала выВам нужно указать свои ul и li идентификаторы:

<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.Это просто Простое древовидное представление на основе CSS .Если вы немного поищете в Интернете, вы найдете множество учебных пособий о том, как реализовать расширенные древовидные представления с помощью Css, JavaScript и jQuery, например This .

Надеюсь, это поможет.