折叠树视图

Question

我在MVC中使用javascrip：

进行树视图

    <script>
    $(function () {
        $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
        $('.tree li.parent_li > span').on('click', function (e) {
            var children = $(this).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
            } else {
                children.show('fast');
                $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
            }
            e.stopPropagation();
        });
    });
</script>

和css代码：

.tree {
min-height:20px;
padding:19px;
margin-bottom:20px;
background-color:#fbfbfb;
border:1px solid #999;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

这是MVC视图中的HTML CODE：

  

if（parent == null）       {           foreach（var i in siteMenu.Where（a =＆gt; a.ParentID == null））           {               

                  @ {var submenu = siteMenu.Where（a =＆gt; a.ParentID.Equals（i.ID））。Count（）;}                   @if（子菜单＆gt; 0）                                   {                                                                                                             

                            }
                            else
                            {
                            }
                            <span>
                                <a href="Detail/@i.ID">@i.Description</a>
                            </span>
                            @if (submenu > 0)
                            {
                                <ul>
                                    @Treeview.GetTreeView(siteMenu, i)
                                    @* Recursive  Call for Populate Sub items here*@
                                </ul>
                            }
                        </li>
                    }
                }
                else
                {
                    foreach (var i in siteMenu.Where(a => a.ParentID.Equals(parent.ID)))
                    {
                        <li>
                            @{var submenu = siteMenu.Where(a => a.ParentID.Equals(i.ID)).Count();}
                            @if (submenu > 0) {
                            <span>
                                <img src="~/Images/add_48.png" />
                            </span>} else {

                            }
                            <span>
                                <a href="Detail/@i.ID">@i.Description</a>
                            </span>
                            @if (submenu > 0)
                            {
                                <ul>
                                    @Treeview.GetTreeView(siteMenu, i)
                                    @* Recursive  Call for Populate Sub items here*@
                                </ul>
                            }
                        </li>
                    }
}

我想折叠ROOT节点的所有子节点：级别2,3,4,5 ...（根是1级节点）想要树视图星。当前，此代码在页面加载时展开所有节点。

谢谢你！