如何使用php / javascript制作预折叠的TreeView

我用php / javascript做了一个树视图。 在页面加载时，我无法弄清楚如何使其预折叠。

这是代码，附带想法。

0){ echo "
"; while($row=mysql_fetch_assoc($query)){ echo "
 ".$row['name']; getChildren($row['entry_id']); } echo "
"; } 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 "
"; while($row=mysql_fetch_assoc($query)){ echo "
 ".$row['name']; getChildren($row['entry_id']); } echo "
"; echo ""; } } 

这是jQuery部分：

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

正如我所说，当页面加载时，我需要关闭所有节点。 我认为应该使用一些JavaScript函数，但我担心我不能创建一个。 有解决方案？

Answer 1

这不是vanilla HTML / jQuery支持的东西，你需要编写一个插件来处理它。 这不是一项微不足道的任务。 我建议看看jstree ，它的function非常全面并且有很好的文档记录 。

编辑

如果你要做的就是隐藏孩子，为什么不简单地将它们初始化为在CSS中display:none 。 然后单击时显示它们。 否则，根据上面的示例，确保在尝试通过将语句包装在$(function(){...})来尝试绑定事件处理程序之前，等待DOM准备就绪：

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

Answer 2

使用CSS非常简单。 向元素添加一些类。

然后在css中：

 .tree.branch{display:none}