我使用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函数，但恐怕我不能做一个。
这不是普通HTML/jQuery所支持的，你需要编写一个插件来处理它。这不是一项微不足道的任务。我建议你看看jstree，它的功能非常全面，文档也很好。
编辑
如果你想做的只是隐藏子元素，为什么不简单地在CSS中将它们初始化为display:none呢?然后点击时显示它们。否则，对于上面的示例，请确保等到DOM准备好之后，再尝试通过在$(function(){...})中包装语句来绑定事件处理程序:
$(function(){
$('.collapsableTree').click(function () {
$(this).parent().children().toggle();
$(this).toggle();
});
});
使用CSS非常简单。为元素添加一些类。
<ul class="tree">
<li class="node">
<ul class="branch">
在css中:
.tree.branch{display:none}