1

我使用 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 函数，但恐怕我做不到。有什么解决办法吗？

4

2 回答 2

0

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

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

Then in css:

.tree.branch{display:none}
于 2013-03-11T22:08:45.047 回答
0

这不是香草 HTML/jQuery 支持的东西，您需要编写一个插件来处理它。这不是一项微不足道的任务。我建议看一下jstree，它的功能非常齐全，并且有据可查。

编辑

如果您要做的只是隐藏孩子，为什么不简单地将它们初始化为display:noneCSS。然后在单击时显示它们。否则，鉴于上面的示例，请确保等到 DOM 准备好后再尝试通过将语句包装在中来绑定事件处理程序$(function(){...})：

$(function(){
    $('.collapsableTree').click(function () {
        $(this).parent().children().toggle();
        $(this).toggle();
    });
});
于 2013-03-11T22:02:35.847 回答