Как сделать pre-collapsed TreeView с php/javascript

Question

Я создал древовидную структуру с использованием php/javascript. Я просто не могу понять, как сделать его предварительно скомпенсированным, при загрузке страницы.

вот код, придумайте идеи.

<?php 

$query=mysql_query("SELECT tree_entry_lang.entry_id, tree_entry_lang.lang, tree_entry_lang.name, tree_entry.parent_entry_id FROM tree_entry,tree_entry_lang WHERE tree_entry.entry_id=tree_entry_lang.entry_id AND lang='eng'"); 
$numrows=mysql_num_rows($query); 

if($numrows>0){ 
    echo "<ul >"; 
    while($row=mysql_fetch_assoc($query)){ 
     echo "<li><img src='..\images\expand.gif' class='collapsableTree' > ".$row['name']; 
     getChildren($row['entry_id']); 


    } 
    echo "</ul>"; 


} 
else echo "Empty base"; 

function getChildren($parent_id){ 

    $query=mysql_query("SELECT tree_entry_lang.entry_id, tree_entry_lang.lang, tree_entry_lang.name, tree_entry.parent_entry_id FROM tree_entry,tree_entry_lang WHERE tree_entry.entry_id=tree_entry_lang.entry_id AND parent_entry_id=".$parent_id); 
$numrows=mysql_num_rows($query); 

if($numrows>0){ 
    echo "<ul >"; 
    while($row=mysql_fetch_assoc($query)){ 
     echo "<li><img src='..\images\expand.gif' class='collapsableTree' > ".$row['name']; 
     getChildren($row['entry_id']); 


    } 

      echo "</ul>"; 
      echo "</li>"; 

     } 



} 

А вот JQuery часть:

$('.collapsableTree').click(function() { 

    $(this).parent().children().toggle(); 
    $(this).toggle(); 

}); 

Как я уже говорил, при загрузке страницы, мне нужно все мои узлы должны быть закрыты. Я предполагаю, что какая-то функция JavaScript должна использоваться, но я боюсь, что я не могу ее создать. Любые решения?

Answer 1

Это не что-то, что поддерживается ванильным HTML/jQuery, вам нужно будет написать плагин для его обработки. Это не тривиальная задача. Я предлагаю взглянуть на jstree, это очень полнофункциональный и well documented.

EDIT

Если все, что вы пытаетесь сделать, это скрыть детей, почему бы не просто инициализировать их display:none в CSS. Затем покажите их при нажатии. В противном случае, учитывая ваш пример выше, убедитесь, что вы будете ждать, пока DOM не будет готов, прежде чем пытаться связать обработчик события, обернув ваше заявление в :

$(function(){ 
    $('.collapsableTree').click(function() { 
     $(this).parent().children().toggle(); 
     $(this).toggle(); 
    }); 
}); 

Answer 2

Очень просто с помощью CSS. Добавьте некоторые элементы к элементам.

<ul class="tree"> 
    <li class="node"> 
     <ul class="branch"> 

Тогда в CSS:

.tree.branch{display:none}