Question

我正在使用this代码在html中生成一个树，问题是，每次刷新页面时树都会展开。

我想创建它，这样当我打开页面时，一些分支将被展开，一些分支将被折叠，具体取决于它具有的属性。

例如：

<span><i class="icon-plus-sign"></i> Parent 1</span>
    <ul> childrens go here
    </ul>
<span><i class="icon-minus-sign"></i> Parent 2</span> 
    <ul> childrens go here
    </ul>

当我打开页面时，我想看到父母2的孩子，而不是父母1的孩子。

我是html的新手，对css和javascript完全陌生。所以任何建议都会有所帮助。

Answer 1

如果我理解正确，你想为某些元素添加一个类，这会导致它们在页面加载时关闭吗？

最简单的解决方案是添加

$(".start-closed").click();

到JQuery的底部，然后将类start-closed添加到要在页面加载时关闭的节点。

JSFiddle：http://jsfiddle.net/dksNr/

如果我误解了这个问题，请告诉我。

Answer 2

在OnClick功能之后添加以下内容：

//Collapse each node
$('.tree li.parent_li > span').each(function(){
   var children = $(this).parent('li.parent_li').find(' > ul > li');
   children.hide('fast');
   $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
});

通过它，它将遍历每个节点并隐藏它。

另一种方法是默认隐藏它：

style="display: none;"

在您想要隐藏的每个节点上

Answer 3

您可以在代码的开头添加每个元素标记的关闭，使用其图标类折叠。

代码：

$('.tree li.parent_li > span').each(function(i,e){
    if ($(this).find('i').hasClass("icon-plus-sign")){
        $(this).parent('li.parent_li').find(' > ul > li').hide();
    }
});

演示：http://jsfiddle.net/q3DQ2/

html折叠/展开的树

3 个答案: