Как сделать предварительно свернутый 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

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

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

Тогда в css:

.tree.branch{display:none}

Answer 2

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

РЕДАКТИРОВАТЬ

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

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