如何使用php/javascript制作预折叠的TreeView [英] How to make pre-collapsed TreeView with php/javascript

问题描述

我已经使用php/javascript制作了树状视图. 我只是不知道如何在页面加载时使其预先折叠.

I've made a tree view using php/javascript. I just can't figure out how to make it pre-collapsed, on page load.

这是代码，附带想法.

<?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部分:

And here is the jQuery part:

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

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

});

正如我所说，在页面加载时，我需要关闭所有节点.我认为应该使用一些JavaScript函数，但是恐怕我做不到. 有解决方案吗?

As I've said, when the page loads, I need all my nodes to be closed. I presume some JavaScript function should be used, But I'm afraid I cant make one. Any solutions ?

推荐答案

使用CSS非常简单.在元素中添加一些类.

Very simple using CSS. Add some classes to the elements.

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

然后在CSS中:

.tree.branch{display:none}

这篇关于如何使用php/javascript制作预折叠的TreeView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！